跳到主要内容

build

2023年12月19日
柏拉文
越努力，越幸运

build​

build.target​

build.target 设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值: modules，这是指 支持原生 ES 模块、原生 ESM 动态导入 和 import.meta 的浏览器。

export default defineConfig({
  build: {
    target: 'es2015', // es2015 es2016 es2017 es2018 es2019 es2020 esnext firefox78 edge88 chrome87 safari14
  }
});

设置合适的 target 就显得特别重要了，一旦目标环境的设置不能覆盖所有的用户群体，那么极有可能在某些低端浏览器中出现语法不兼容问题，从而发生线上事故。因此，为了线上的稳定性，推荐大家最好还是将 target 参数设置为ECMA语法的最低版本es2015/es6。

build.modulePreload​

build.polyfillModulePreload​

由于部分支持原生 ESM 的浏览器并不支持 module preload，因此某些情况下需要注入相应的 polyfill 进行降级。当你在 Vite 配置文件中开启下面这个配置时:

{
  build: {
    polyfillModulePreload: true
  }
}

Vite 会自动应用 modulePreloadPolyfillPlugin 插件，在产物中注入 module preload 的 Polyfill 代码

build.outDir​

build.assetsDir​

build.assetsInlineLimit​

对于比较小的资源，适合内联到代码中，一方面对代码体积的影响很小，另一方面可以减少不必要的网络请求，优化网络性能。而对于比较大的资源，就推荐单独打包成一个文件，而不是内联了，否则可能导致上 MB 的 base64 字符串内嵌到代码中，导致代码体积瞬间庞大，页面加载性能直线下降。Vite 中内置的优化方案是下面这样的:

  • 如果静态资源体积 >= 4KB，则提取成单独的文件

  • 如果静态资源体积 < 4KB，则作为 base64 格式的字符串内联

build.assetsInlineLimit 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。如果你指定了 build.lib，那么 build.assetsInlineLimit 将被忽略，无论文件大小或是否为 Git LFS 占位符，资源都会被内联。这个临界值你可以通过 build.assetsInlineLimit 自行配置，如下代码所示:

// vite.config.ts
{
  build: {
    // 8 KB
    assetsInlineLimit: 8 * 1024
  }
}

svg 格式的文件不受这个临时值的影响，始终会打包成单独的文件，因为它和普通格式的图片不一样，需要动态设置一些属性

build.cssCodeSplit​

build.cssTarget​

build.cssTarget 此选项允许用户为 CSS 的压缩设置一个不同的浏览器 target，此处的 target 并非是用于 JavaScript 转写目标。

export default defineConfig({
  build: {
    cssTarget: 'esbuild' // esbuild 、terser  默认为 esbuild
  }
});

默认情况下 Vite 会使用 Esbuild 对 CSS 代码进行压缩，一般不需要我们对 cssTarget 进行配置。不过在需要兼容安卓端微信的 webview 时，我们需要将 build.cssTarget 设置为 chrome61，以防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式，出现样式问题。

build.cssMinify​

build.sourcemap​

build.rollupOptions​

build.commonjsOptions​

build.dynamicImportVarsOptions​

build.lib​

build.manifest​

build.ssrManifest​

build.ssr​

build.ssrEmitAssets​

build.minify​

build.minify 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%。当设置为 terser 时必须先安装 Terser。

export default defineConfig({
  build: {
    minify: 'esbuild' // esbuild 、terser  
  }
});

build.terserOptions​

build.terserOptions 传递给 Terser 的更多 minify 选项。