diff options
author | 2021-04-26 16:54:20 -0500 | |
---|---|---|
committer | 2021-04-26 15:54:20 -0600 | |
commit | dea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch) | |
tree | 49569a511201b4defc23b6654b475e458452596a /examples/snowpack/src/pages/guides/optimize-and-bundle.md | |
parent | 0ea4a986e207238bf0ac1db841b2a5d5b567d84d (diff) | |
download | astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.gz astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.zst astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.zip |
Update defaults directory structure to `src` and `dist` (#132)
* chore: update defaults in docs
* chore: update config defaults
* test: update tests to config defaults
* chore: update gitignore to new defaults
* docs: update readme to new defaults
* chore: update examples to new defaults
* chore: update default exclude in lang server
* chore: update tests
* test: fix failing tests
* chore: update www defaults
Diffstat (limited to 'examples/snowpack/src/pages/guides/optimize-and-bundle.md')
-rw-r--r-- | examples/snowpack/src/pages/guides/optimize-and-bundle.md | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/examples/snowpack/src/pages/guides/optimize-and-bundle.md b/examples/snowpack/src/pages/guides/optimize-and-bundle.md new file mode 100644 index 000000000..442ec3c05 --- /dev/null +++ b/examples/snowpack/src/pages/guides/optimize-and-bundle.md @@ -0,0 +1,54 @@ +--- +layout: ../../layouts/content.astro +title: Optimize & Bundle for Production +published: true +description: How to optimize your Snowpack build for production, with or without a bundler. +--- + +`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](https://esbuild.github.io/). 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](https://esbuild.github.io/faq/#production-readiness). At the moment, we only recommended this for smaller projects. + +```js +// snowpack.config.js +// Example: Using Snowpack's built-in bundling support +module.exports = { + optimize: { + bundle: true, + minify: true, + target: 'es2018', + }, +}; +``` + +The full supported interface is: + +```ts +export interface OptimizeOptions { + entrypoints: 'auto' | string[] | ((options: { files: string[] }) => string[]); + preload: boolean; + bundle: boolean; + splitting: boolean; + treeshake: 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](https://www.npmjs.com/package/@snowpack/plugin-webpack) +- Rollup: [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/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](/plugins) to browse all available Snowpack plugins, and read the [Plugins Guide](/guides/plugins) if you're interested in creating your own. |