Snowpack (www.snowpack.dev) is a tool for building web applications, and it is not specific to a particular framework. It supports React, Svelte, Vue, and more. The goal of Snowpack is to speed the development cycle by dramatically reducing build times. It provides an alternative to using a module bundler such as Webpack, Rollup, and Parcel.
Snowpack does not build a single “bundle” containing all the dependency code and app-specific code for the app. Instead, it uses Rollup to bundle each dependency as a separate ECMAScript module. This has the advantage of making build times faster because, after changes to the app code are detected, it only has to bundle the app code. Dependency bundling only occurs again when new dependencies are added or their versions change.
When the app starts, the browser separately downloads code for each bundled dependency rather than downloading a single bundle containing all the code. Browser support for HTTP2 and improved caching makes this efficient.
The following steps will create a new Svelte app that uses Snowpack:
Create the app using Create Snowpack App (CSA):
npx create-snowpack-app snowpack-demo \ --template @snowpack/apptemplate-svelte
cd snowpack-demo
npm start
This builds app and dependency modules in memory and serves them up to the browser.
Additional components can now be defined under the src directory. These will be detected and automatically bundled, and the browser will reload the changes.
The following example app contains nothing that is specific to Snowpack (see figure G.1). It merely demonstrates the use of Snowpack for managing dependencies. Two npm packages are used. To install them, enter npm install date-fns lodash.
Figure G.1 Snowpack demo
Listing G.1 App that uses the DateDisplay component in src/App.svelte
<script>
import _ from 'lodash';
import DateDisplay from './DateDisplay';
let name = 'Snowpack';
</script>
<h1>Hello, {_.startCase(name)}!</h1>
<label>
Name
<input bind:value={name}>
</label>
<DateDisplay />
<style>
h1 {
color: red;
}
</style>
Listing G.2 DateDisplay component in src/DateDisplay.svelte
<script>
import {format} from 'date-fns';
</script>
<div>
Today is {format(new Date(), 'MMM dd, yyyy')}.
</div>
For tips on modifying an existing Svelte app to use Snowpack, see the Snowpack documentation (www.snowpack.dev/#migrating-an-existing-app).
In development mode (npm start), apps built with Snowpack only run in modern browsers. However, the result of a production build does run in older browsers, including IE 11.
To create a production build of an app, enter npm run build, which performs the following steps:
Creates the build/web_modules directory, if not already present.
Bundles each dependency into a separate .js file in build/web_modules.
Compiles all .svelte files to .js and .css files under build/_dist_. These import dependencies from the web_modules directory .
For more information on creating production builds, see the Snowpack documentation (www.snowpack.dev/#snowpack-build). It describes an option to create a single bundle containing all the app-specific code and dependencies.