生产环境下的构建优化

snowpack build将你的网站构建成网络原生 JS、CSS 和 HTML 文件。这种 “免打包式”部署对于小型网站来说已经足够了,但许多开发者更愿意优化和打包他们的最终网站,以提高生产性能。

Snowpack 可以在你的最终构建中运行各种优化,以处理传统的浏览器支持、代码最小化、代码拆分、tree-shaking、dead-code elimination、预加载、打包等等。

Snowpack 的构建优化有两种类型:内置(esbuild)和插件(webpack、rollup 或其他你可能想运行的东西)。

选项 1:内置优化

Snowpack 最近发布了一个由esbuild支持的内置优化 pipeline。使用这个内置的优化器,你现在可以比 Webpack 或 Rollup 快 10 倍到 100 倍地打包、转码和最小化你的生产构建。然而,esbuild 还很年轻,还没有为生产做好准备。目前,我们只推荐小型项目使用。

// snowpack.config.mjs
// Example: Using Snowpack's built-in bundling support
export default {
  optimize: {
    bundle: true,
    minify: true,
    target: "es2018",
  },
};

完整的支持界面是。

export interface OptimizeOptions {
  entrypoints: "auto" | string[] | ((options: { files: string[] }) => string[]);
  preload: boolean;
  bundle: boolean;
  loader?: { [ext: string]: Loader };
  sourcemap: boolean | "external" | "inline" | "both";
  splitting: boolean;
  treeshake: boolean;
  manifest: boolean;
  minify: boolean;
  target: "es2020" | "es2019" | "es2018" | "es2017";
}

选项 2:优化插件

Snowpack 通过插件支持流行的打包器。

目前,我们建议使用@snowpack/plugin-webpack,直到我们的内置优化支持更加成熟

查看我们的插件目录,浏览所有可用的 Snowpack 插件,如果你对创建自己的插件感兴趣,请阅读插件指南