vite2 打包体积优化

最近在做项目重构， 一阵分析下来发现首页白屏时间，和包的体积过大，着手优化

1. CDN 引入

image.png

打包之后提示chunk 的体积超过500KB， 把该模块提取出来，使用CDN 引入

vite 配置如下
先安装 rollup-plugin-external-globals 插件，该插件可以告诉 Rollup 哪些库是不需要打包的。

npm add rollup-plugin-external-globals -D

使用方法：在vite.config.ts中添加打包配置

import externalGlobals from 'rollup-plugin-external-globals';

const globals = externalGlobals({
  OSS: 'ali-oss',
});

export default defineConfig({
    build: {
        rollupOptions: {
            external: ['ali-oss'],
            plugins: [globals],
        }
    }
});

同时需要在 index.html 模版中引入对应库的CDN,引入时根据需求是否加入异步

    <script
      charset="utf-8"
      type="text/javascript"
      async
      src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>

2. 更换混淆方式 （根据自己需要）

https://cn.vitejs.dev/config/build-options#build-minify

image.png

3. 分包

manualchunks

为什么需要分包策略？

浏览器在请求静态资源时，只要静态资源的名称不变，它就不会重新请求 xxx.js资源。

使用Vite打包后的js文件是带有哈希值的，只要我们的代码内容有一点点变化，那么文件的hash值都会变化。

所以我们只要把很长时间不会变动的文件分出来打包， 这样每次在打包如果文件没有变化，哈希值也不会变，用户访问时会被缓存下来

配置分包

    build: {
        minify:'terser',//  'terser' | 'esbuild'。默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%
        reportCompressedSize: false,// 启用/禁用 gzip 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
        rollupOptions: { // 静态资源分类打包
            output: {
                entryFileNames: `assets/entry/[name][hash].js`,
                chunkFileNames: `assets/chunk/[name][hash].js`,
                assetFileNames: `assets/file/[name][hash].[ext]`,
                manualChunks(id) { // 该选项允许你创建自定义的公共 chunk。当值为对象形式时，每个属性代表一个 chunk，其中包含列出的模块及其所有依赖，除非他们已经在其他 chunk 中，否则将会是模块图（module graph）的一部分。chunk 的名称由对象属性的键决定。
                 
                    if (id.includes('node_modules')) {
                        const arr = id.toString().split('node_modules/')[1].split('/')
                        switch(arr[0]) {
                            case 'vue-cropper':
                            case 'swiper':
                            case 'ali-oss':
                            case '@vue':
                            case 'vant':
                            case 'pinia':
                            case 'pinia-plusin-persist':
                              return '_' + arr[0]
                            default :
                              return '__vendor'
                          }
                        }
                }
            }
        }
    },
    plugins: [
      vue(),
      Components({
        resolvers: [VantResolver()]
      }),
      // 添加以下6行，并根据自己需求进行配置
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定图片格式
        symbolId: 'icon-[dir]-[name]'
      }),
      visualizer(),
    //   viteCompression(
    //     {
    //       algorithm: 'gzip',
    //       threshold: 10240, // 如果体积大于阈值，则进行压缩，单位为b
    //       verbose: false, // 是否在控制台中输出压缩结果
    //       deleteOriginFile: true // 压缩后是否删除源文件
    //     }
    //   )
    ],

未完~