Snowpack is a build tool for web applications that can be used without bundling in development. This is entirely thanks to the power of native browser ES modules, which allow the tool to remove bundling steps in the development environment. As a result, Snowpack helps make the development environment build faster and remains fast even as your codebase grows.
Snowpack also introduced the concept of unbundling your application in development, which helps you avoid the need to rebuild and rebundle entire chunks of your application every time you save a single file. It just does an instant update of the changed file via Hot Module Replacement.
The official website describes Snowpack as “a modern, lightweight toolchain for web application development.”
New features in Snowpack 2.0
When version 1.0 was released to the public in January, it came with exciting features such as:
- A dev environment that starts up in 50ms or less
- Capability to reflect changes instantly in the browser
- Integration with your favorite bundler for production-optimized builds
- Out-of-the-box support for TypeScript, JSX, CSS modules, and more.
- Ability to connect your favorite tools with custom build scripts and third-party plugins
The Snowpack team released version 2.0 on May 26 with a number of exciting new features, including:
- O(1) file builds
- Improved dev environment
- Improved automatic HMR support
- Ability to customize your build with build scripts
- Zero-config prototyping
- Create Snowpack App (CSA) templates
O(1) file builds
The official website describes snowpack 2.0 as “a build system designed for this new era of web development.” O(1) file building involves the process of only rebuilding or rebundling a file that is changed in development without rebuilding the entire application. In other words, if you make a change to a file in development, only that file would be rebuilt without affecting other files.
This is different from other build tools such as webpack, which is an O(n) build tool. They are called O(n) build tools because traditional bundling has a complexity of O(n). When a file is changed in traditional bundling, the build tool will rebuild the entire chunks in the application because of just a single file.
Snowpack 2.0 was shipped with support for O(1) file building, which allows it to make updates at lightning-fast speed because when a file is changed in development, only that file is rebuilt.
O(1) file building includes many benefits of traditional O(n) bundling, including:
- Faster builds
- A project’s file size does not affect the build’s performance
- Individual files are cached on first build and are only rebuilt if there is a change
Improved dev environment
The development server is now faster than ever because of the O(1) file building. When you run snowpack dev, you’ll notice how fast the startup has become. It starts up in <50ms because no bundling work is carried out.
Snowpack only builds files that are essential for a particular page, no matter the number of files contained in your project. This is possible because of dynamic imports, which will load a module only when it’s needed.
Improved automatic HMR support
Snowpack uses Hot Module Replacement to carry out instant updates in the browser, which is a very cool feature.
In version 2, Snowpack was shipped with automatic support for the following out of the box:
- CSS
- CSS modules
- JSON
- React (fast refresh) via a configuration
- Preact (prefresh) via a configuration
- Vue via a plugin
- Svelte via a plugin
The Snowpack team attached a hot() function to the general ESM-native import.meta HMR API.
Customize your build with build scripts
Snowpack 2.0 improved the use of build scripts to connect your favorite build tool to Snowpack. It looks and feels like how you’d configure scripts in a package.json file.
With build scripts, you can take total control of the entire build process. You can either tweak it to suit your needs or build your own build process. Snowpack offers third-party JavaScript plugins and enables you to build your own project-specific plugins without any hassle.
Build scripts are usually saved as snowpack.config.json. This build script will run every run *.js,*.jsx,*.mjs,*.cjs files through the Babel plugin we specified above. It will also run every *.css file through the PostCSS CLI.
{
"scripts": {
// Run every "*.css" file through the PostCSS CLI
"build:css": "postcss",
//Run every "*.js,*.jsx,*.mjs,*.cjs" file through the babel plugin
"build:js,jsx,mjs,cjs": "@snowpack/plugin-babel",
},
"plugins": [
"@snowpack/plugin-babel",
],
}
Zero-config prototyping
One of the coolest features in Snowpack 2.0 is zero-config prototyping, which enables you to use the tool without the need to configure basic things. In other words, you won’t need a snowpack.config.json file until you really need it.
Learn more →🧵 Snowpack v2 Preview: Zero-Config Prototyping
One of my favorite things that we got right in Snowpack v2 was its default behavior as a zero-config, fast-prototyping dev server.
Here’s some screenshots of Snowpack running in a static, config-free directory: pic.twitter.com/bB55JWq5fh
— fks (@FredKSchott) May 18, 2020
By default, Snowpack comes with out-of-the-box configuration for:
- Rewriting your package imports for the browser
- Transpiling JSX and TS files to JS
- Proxying CSS and JSON imports via ES modules
If you need to do extra processes, you can create a script or add a plugin to help you with it.
Create Snowpack App (CSA) templates
Snowpack 2.0 comes with new and improved starter templates to suit your needs. A CSA is a starter template that consists of a preconfigured, Snowpack-powered development environment. It’s similar to the popular Create React App, only powered by Snowpack instead of webpack.
CSA templates are available for some popular JavaScript frameworks and static site generators, including:
You can also create your own Create Snowpack App template and share it with the community.
Conclusion
Snowpack 2.0 comes with myriad new features and improvements to existing features that help streamline and simplify the build process.
To learn more, check out the official Snowpack 2.0 release post.
What’s your favorite new feature in Snowpack 2.0? Let us know in the comments section.
Are you adding new JS libraries to improve performance or build new features? What if they’re doing the opposite?
There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.
LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.
https://logrocket.com/signup/LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — Start monitoring for free.
