The third major iteration of the Snowpack front-end build tool was recently shipped with pre-bundled streaming imports, integrated build optimizations, and JavaScript/Node APIs. Snowpack 3 won the 2020 JS Open Source’s developer productivity boost award and ranks at the top of developer interest and satisfaction in the 2020 State of JS survey.
Fred K. Schott, Snowpack maintainer, reminded the mission of Snowpack:
One year ago, Snowpack first released with the mission to reimagine web development for modern JavaScript and ESM. Snowpack leverages modern web features to deliver a frontend build tool that needs just 50ms to start up and react to new file changes, regardless of project size.
The first major iteration of Snowpack shipped in January 2020 made bundling an opt-in optimization process for developers who restricted themselves to targetting modern browsers and using JavaScript standardized module system, ESM modules. Other restrictions included not using non-standard JavaScript syntax that is understood only by some bundlers (e.g., import "./app.css" syntax supported by Webpack).
The second iteration featured constant-time builds (claimed to be below 50ms) independently of project size. This is in contrast with development build times that grows proportionally with the size of the project, which gave rise to a flurry of ad-hoc techniques to reduce build times for large projects (e.g., upgrading plugins, jettisoning image loaders).
Snowpack production builds may be optimized via bundler plugins. In development, however, developers may default to Snowpack builds, which are optimized for development speed and short feedback loop.
Snowpack 3 goes a step further by automatically fetching imports from a remote CDN instead of bundling them locally. The feature is opt-in and configured in the snowpack.config.js file under the packageOptions property:
// snowpack.config.js
"packageOptions": { "source": "remote"}
Thus, an import "preact" will be converted to import "https://pkg.snowpack.dev/preact". Like Deno, Snowpack then fetches packages by URL. Snowpack does so only when needed, and the response is cached for future, offline use.
The feature, called streaming imports, may enable developers to drop their dependency on npm for fetching packages. In the best case, the dependency on npm and node may be dropped entirely. Snowpack release note touts speed, safety, and simplicity as key reasons to adopt the streaming imports feature. Streaming imports plays well with TypeScript. Snowpack is working on improving support for non-JavaScript packages (Svelte and Vue files).
Snowpack 3 optimizes and bundles for production via esbuild (default) or bundler-specific plugins. esbuild, written in Go and compiled to native code, touts unmatched bundling speed due to its parallelizing tasks over multi-core processors and minimizing of data transformations. esbuild, however, is not yet production-ready. The Snowpack team recommends at the moment esbuild for smaller projects. For other projects, a Webpack plugin and a Rollup plugin are available, together with a list of specific-purpose plugins (e.g., CSS, Svelte, Angular, Unicode).
Snowpack additionally ships with a new JavaScript API and Node.js runtime that allows building custom integrations and processing on top of Snowpack. Among such integrations figure Svelte’s new web app framework SvelteKit and the Microsite static site generator.
Snowpack is an open-source project with an MIT license. Contributions are welcome and should follow the contributing guidelines. Feedback can be given through the project’s GitHub repository.
