静态资源构建

构建方案

在vite中，静态资源有两种构建方式

1、打包成单文件

2、通过base64编码的格式嵌套到代码中

这两种方案的选择：

对于较小的资源，适合内联到代码中，一方面对代码体积影响较小，另一方面可以减少不必要的网络请求，优化网络性能。

对于较大的资源，推荐单独打包成文件，大文件不推荐内联，内联可能导致上MB的base64字符串内嵌到代码中，导致代码体积庞大，页面加载性能直线下降。

vite内置的优化方案如下：

• 静态资源体积 >= 4kb 则提取成单独的文件
• 静态资源体积 < 4kb 则作为base64格式的字符串内联

上述的4kb则为提取成单文件的临界值，小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。

这个临界值可以通过build.assetsInlineLimit进行配置，如下：

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig(({ mode }) => {

  return {
    plugins: [vue()],
    build: {
      assetsInlineLimit: 8 * 1024 // 8kb
    },
    }
  };
});

注意

如果你指定了 build.lib，那么 build.assetsInlineLimit 将被忽略，无论文件大小，资源都会被内联。

在上面的配置中，内联阈值为 8kb， 如果我们在项目中引入一张超过8kb的图片，打包后在dist文件中可以看到这张图会被被打包成单独的文件，而文件大小低于8kb的，则打包为base64的内联资源。

其它打包配置

    build: {
      outDir: "dist", // 指定打包路径，默认为项目根目录下的dist目录
      minify: "esbuild", // esbuild打包更快但是不能去除console.log，terser打包慢但能去除console.log
      // minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log
      // terserOptions: {
      //   compress: {
      //     keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
      //     drop_console: true, // 生产环境去除 console
      //     drop_debugger: true // 生产环境去除 debugger
      //   },
      //   format: {
      //     comments: false // 删除注释
      //   }
      // },
      assetsInlineLimit: 4 * 1024, // 打包内联阈值4kb
      chunkSizeWarningLimit: 2000, // 规定触发警告的 chunk 大小, 消除打包大小超过500kb警告
      // 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储
      rollupOptions: {
        output: {
          chunkFileNames: "static/js/[name]-[hash].js",
          entryFileNames: "static/js/[name]-[hash].js",
          assetFileNames: "static/[ext]/[name]-[hash].[ext]"
        }
      }
    }

在上述的打包配置中有两个打包方式：

1、minify: "esbuild"

2、minify: "terser"

esbuild打包更快，esbuild的打包效率是terser的数倍，但是不能去除console.log

terser打包慢但可以通过配置去除console.log

如果你要使用terser进行打包，需要安装依赖：

pnpm install terser -D

参考文档

build.assetsInlineLimit

build.minify