Snowpack v3.0 is here! This is our biggest release yet with brand new features including:
- Pre-bundled streaming imports - Import any npm package, on-demand.
- Integrated build optimizations - Built-in bundling, preloading, minification, and more.
- Node.js Runtime API - Import your Snowpack-built files directly into Node.js.
- Bug fixes, stability improvements, and a whole lot more!
Install the newest version of Snowpack to get started:
$ npm install snowpack@^3.0.0
Or, try out one of our updated Create Snowpack App starter templates:
$ npx create-snowpack-app new-project-directory --template @snowpack/app-template-react
Reimagining Web Development for ESM
What are Streaming Imports?
pnpm. These npm packages can’t run directly in the browser, so additional work is needed to resolve, process, build and bundle these packages for the browser before you can actually use them.
What if we could simplify this? What if you could skip the “npm install” step entirely and just fetch the relevant, pre-built package code on-demand via ESM import?
// you do this: import * as React from 'react'; // but get behavior like this: import * as React from 'https://firstname.lastname@example.org';
Snowpack v3.0 brings together the best of both worlds: Get the simplicity of
import 'react' in your own source code and let Snowpack fetch these dependencies behind the scenes, pre-built and ready to run in the browser. Snowpack caches everything for you automatically, so you can continue to work offline after the first package fetch.
This new workflow has several benefits over the traditional “npm install” approach:
- Speed: Skip the install + build steps for dependencies, and load your dependencies on-demand as pre-build, pre-bundled ESM code.
- Less Tooling: ESM packages are managed by Snowpack, so frontend projects that don’t need Node.js (Rails, PHP, etc.) can drop the npm CLI entirely if they choose.
- Identical Final Build: When you build your site for production, package code is transpiled with the rest of your site and tree-shaken to your exact set of imports.
This is our bet on the future of web development. But if this all sounds too wild for you or you have some technical reason to keep managing your dependencies with npm, don’t worry. This is 100% opt-in behavior for those who want it. By default, Snowpack will continue to pull your npm package dependencies out of your project
node_modules directory like it always has.
Check out our guide on Streaming Package Imports to learn more about how to enable this new behavior in your project today.
Built-in Optimizations, Powered by esbuild
Snowpack is able to adopt esbuild today thanks to an early bet that we made on the future of bundling: bundling is just a post-build optimization. Thanks to this early design decision, esbuild can be plugged in and swapped out of your Snowpack build as easily as any other bundler.
esbuild is still a young project, but its future looks promising. In the meantime, we will also continue to invest in the existing bundler plugins for a long time to come, so that more mature projects can continue to use mature bundlers like Webpack & Rollup.
To get started, check out the
optimize option in our newest Optimizing Your Snowpack Build guide.
A New Node.js Runtime
Speaking of Svelte, this next feature comes directly out of our collaboration with the Svelte team. As a part of building out SvelteKit, Rich Harris created a server-side runtime for Snowpack. This runtime lets you import any Snowpack-built file directly into Node.js, handling things like ESM->CJS conversion and CSS extraction automatically.
The result is a unified build pipeline across both Node.js and the frontend, with all of the on-demand build performance benefits of Snowpack. Importing frontend code to run in Node.js unlocks features like true server-side rendering (SSR), test runner integrations for Jest/uvu/Mocha, and more.
Check out our new SSR guide to get started and learn more about all of the different ways that you can connect to your Snowpack build.
Snowpack’s One Year Anniversary
Last week marked Snowpack’s one-year anniversary of the original v1.0.0 release. Looking back, I’m blown away by everything that’s happened since:
- 150+ releases (from
v0.0.1, all the way to v3.0 today)
- 100+ Snowpack plugins to choose from (and growing fast!)
- 100+ individual contributors
- 15,000+ stars on GitHub
- #1 Developer Productivity Boost Winner, 2020 JS Open Source Awards
- #1 Highest Developer Interest, 2020 State of JS
- #1 Highest Developer Satisfaction (tied), 2020 State of JS
A huge thank you to everyone who has contributed code to Snowpack, and the hundreds of developers joining us on GitHub and on Discord. This project wouldn’t exist today without you and your support. Thank you!
— Fred K. Schott (@FredKSchott)