Introducing Snowpack, the fastest ESM powered front-end build tool, that takes the development process up a notch and makes it incredibly fast.
I would love it, if people got onboard and started using Snowpack.
I am done waiting for a project, using ancient ejected Webpack config, to finish building. I am done seeing them fail to update the UI instantly when changes are done.
I found out about Snowpack a little too late, and I don't want that to be the case for everyone else.
I think Snowpack is being modest, not claiming to be the fastest in their official site. Because seeing it in action, it's pretty clear that it beats Webpack & Rollup hands down during development!
As you will see, from all the reasons, listed below:
Reasons
1. Hyper Development Speed
Traditional JavaScript build tools like webpack and Parcel need to rebuild & rebundle entire chunks of our application every time we save a single file.
Hence it’s common to see 30+ second dev startup times when building large apps with a traditional bundler.
Snowpack however does it near instantly, by making a lot of fundamental changes, like:
- Using JavaScript ES Module feature.
- Serving the application unbundled during development.
- The dev server builds a file only when it’s requested by the browser.
- Each file gets built only once and then is cached forever.
- Snowpack rebuilds a single file, on change.
- NPM dependency builds are one-off.
What all that means is that Snowpack can start up instantly and scale to infinitely large projects without slowing down, as project size doesn’t affect development speed at all!
N.B. It's built to speed up development by making use of native modern browser feature like ESM, so don't go around developing in older browsers!
2. Smarter Dependency Handling
Snowpack processes npm dependencies separately. As dependencies rarely change, Snowpack rarely needs to rebuild them.
Snowpack bundles all of the dependencies into single JavaScript files. Which then can be imported using Import Statements.
After Snowpack builds the dependencies, any package can be imported and run directly in the browser with zero additional bundling or tooling requirements.
<!-- This runs directly in the browser with `snowpack dev` -->
<body>
<script type="module">
import React from 'react';
console.log(React);
</script>
</body>3. Bundling on Demand
Snowpack considers bundling an optional optimization, which can be skipped till it's absolutely necessary.
Legacy browser support, code minification, code-splitting, tree-shaking, dead code elimination, and other performance optimizations can all be handled in Snowpack via bundling. And using bundlers, with Snowpack, is easy.
When we go to build the application for production, we can plug in our favorite bundler via an official Snowpack plugin for Webpack or Rollup. With Snowpack already handling the build, there’s no complex bundler config required.
// Bundlers plugins are pre-configured to work with Snowpack apps.
// No config required!
{
"plugins": [["@snowpack/plugin-webpack"]]
}4. Hot Module Replacement
Hot Module Replacement (HMR) is not unique to Snowpack.
However being able to use ESM along with unbundled development makes page refresh, on change, near instantaneous!
Supported File Types Are:
- CSS
- JSON
- JavaScript (Front End Frameworks need to Support it, like Svelte does!)
5. Fast Refresh
Snowpack also supports Fast Refresh for most popular frameworks like Svelte or React.
Fast Refresh is a framework-specific enhancement to HMR, which applies single file updates in a way that preserves component state across updates.
Fast Refresh makes development even faster, especially when working on popups and other secondary view states that normally would require a click to re-open or revisit after every change.
This is something that Flutter had been doing for a long time now, and I wondered why front-end development can't be done that way. And now thanks to Snowpack, it can be!
Conclusion
On top of all the above mentioned reasons, Snowpack has inbuilt support for JSX & TypeScript, which means, no extra plugins needed to work with those. (.jsx or .ts extension is all that's needed!)
So what are you waiting for, give it a go:
By starting anew:
Or by using a starter template:
Abhijit Kar
And if you are thinking about speeding up the development, why not speed up the front-end entirely, right till the production, by using Svelte! Checkout:
Abhijit Kar
Let me know your thoughts down in the comments below.
- Reviews
- Best Of
- Web Development
- Alternatives
- #JavaScript
Leave a Comment