Optimize & Bundle for Production
snowpack build builds your site into web native JS, CSS, and HTML files. This “unbundled” deployment can be enough for small sites, but many developers prefer to optimize and bundle their final site for production performance.
Snowpack can run all sorts of optimizations on your final build to handle legacy browser support, code minification, code-splitting, tree-shaking, dead code elimination, preloading, bundling, and more.
Snowpack build optimizations come in two flavors: built-in (esbuild) & plugin (webpack, rollup, or whatever else you might like to run).
Option 1: Built-in Optimizations
Snowpack recently released a built-in optimization pipeline powered by esbuild. Using this built-in optimizer, you can now bundle, transpile, and minify your production builds 10x-100x faster than Webpack or Rollup. However, esbuild is still young and not yet production-ready. At the moment, we only recommended this for smaller projects.
// snowpack.config.js
// Example: Using Snowpack's built-in bundling support
{
"experiments": {
"optimize": {
"bundle": true,
"minify": true,
"target": 'es2018'
}
}
}
The full supported interface is:
export interface OptimizeOptions {
entrypoints: 'auto' | string[] | (({files: string[]}) => string[]);
preload: boolean;
bundle: boolean;
manifest: boolean;
minify: boolean;
target: 'es2020' | 'es2019' | 'es2018' | 'es2017';
}
Option 2: Optimize Plugins
Snowpack supports popular bundlers via plugin:
- webpack (recommended!): @snowpack/plugin-webpack
- Rollup: snowpack-plugin-rollup-bundle
For now, we recommend using @snowpack/plugin-webpack until our built-in optimize support is more mature.
Check out our Plugins Catalog to browse all available Snowpack plugins, and read the Plugins Guide if you’re interested in creating your own.
Legacy browser support
You can customize the set of browsers you’d like a bundler to support via the package.json “browserslist” property, going all the way back to IE11. This will be picked up when you run snowpack build to build for production.
/* package.json */
"browserslist": ">0.75%, not ie 11, not UCAndroid >0, not OperaMini all",