Vite 工具优化包体积和性能（附项目配置及解释）

产物分析报告

安装 rollup-plugin-visualizer插件，生成可视化构建产物关系图页面

import { defineConfig } from "vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    visualizer({
      // 打包完成后自动打开浏览器，显示产物体积报告
      open: true,
    }),
  ],
});

配置脚本，npm run build后生成 stats.html 文件

"scripts": {
  "build": "vite build --mode production"
}

stats.html 文件产物分析关系图

从上面可以很直观地观察到产物体积的分布情况，定位到某些体积过大的包，然后针对性地进行优化。

Gzip 压缩

Gzip 压缩使用 vite-plugin-compression 插件， 压缩后减小代码体积，提升加载性能

npm install vite-plugin-compression -D

vite-plugin-compression 常用配置项

可配置项名称	默认值	释义
verbose	true	是否在控制台中输出压缩结果
filter	RegExp or (file) => boolean	指定未压缩的资源
disable	false	是否禁用
threshold	1024	如果体积大于阈值，则进行压缩，单位为b
algorithm	gzip	压缩算法，可选['gzip'，'brotliCompress'，'deflate'，'deflateRaw']
ext	.gz	生成的压缩包的后缀
compressionOptions	-	对应压缩算法的参数
deleteOriginFile	-	压缩后是否删除源文件

// build.rollupOptions.plugins[]
viteCompression({
  algorithm: 'gzip',
  threshold: 10240,
  verbose: true, // 是否在控制台中输出压缩结果
  ext: '.gz',
  deleteOriginFile: true // 源文件压缩后是否删除
})

文件大小在阈值超过 10k 后使用 gzip 算法进行压缩

压缩 gz 后缀文件，浏览器正常解析，需要 配置 nginx http 请求，告诉浏览器支持的类型，设置响应头 content-encoding: gzip 。

//在nginx添加
http {
    # 开启或者关闭gzip模块(on|off)
    gzip_static on;
    # gzip压缩比，1 压缩比最小处理速度最快，9 压缩比最大但处理最慢（传输快但比较消耗cpu）。
    gzip_comp_level 2;
}

图片压缩

使用 vite-plugin-imagemin 对图片进行压缩优化

npm i vite-plugin-imagemin -D

import { defineConfig,loadEnv} from 'vite'
import viteImagemin from 'vite-plugin-imagemin'
export default  ({ mode }) => defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { // gif图片压缩
        optimizationLevel: 3, // 选择1到3之间的优化级别
        interlaced: false, // 隔行扫描gif进行渐进式渲染
        // colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。
      },
      optipng: { // png
        optimizationLevel: 7, // 选择0到7之间的优化级别
      },
      mozjpeg: {// jpeg
        quality: 20, // 压缩质量，范围从0(最差)到100(最佳)。
      },
      pngquant: {// png
        quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
        speed: 4, // 压缩速度，1(强力)到11(最快)
      },
      svgo: { // svg压缩
        plugins: [
          {
            name: 'removeViewBox',
          },
          {
            name: 'removeEmptyAttrs',
            active: false,
          },
        ],
      },
    }),
  ]
})

使用后，可以看到图片的压缩比例

资源打包目录

将打包的资源划分到不同的文件夹下

 build: {
  rollupOptions: {
    output: {
      chunkFileNames: 'js/[name]-[hash].js',  // 引入文件名的名称
      entryFileNames: 'js/[name]-[hash].js',  // 包的入口文件名称
      assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
    }
  }
}

产物拆包

在不配置 manualchunks 的情况下，rollup会将每个模块文件打包成一个单独的 js 文件，不会对 chunk 进行合并，这会导致 chunk 数量太多，有些文件只有 几 kb（触发同域名网络请求最大数量限制）

如果新项目，可以将依赖源码和项目代码分开， chunk 分为 index 和 vendor

output: {
  manualChunks: (id: string) => {
    if (id.includes('node_modules')) {
      return 'vendor'
    }
    return 'index'
  }
}

随着项目增长，存在以下弊端

• vendor 依赖文件过大，首屏加载时间长
• 业务代码经常迭代，导致 index 文件无法使用缓存
• 构建时需要合并代码，CI打包时间较长

可以根据打包产物关系图，分析比较大块的包文件，比如 monaco-editor、ali-oss 比较大，进行拆包到独立的文件

output: {
  manualChunks (id) {
    if (id.includes('/node_modules/monaco-editor/')) return 'monaco'
    if (id.includes('/node_modules/ali-oss/')) return 'ali-oss'
    if (id.includes('/node_modules/')) return 'vendor'
  }
}

经过上面配置，还有一些较小的模块没有合并，rollup 在3.3之后的版本提供了一个实验性质的配置项 output.experimentalMinChunkSize，来合并小chunk

build: {
    rollupOptions: {
      output: {
        experimentalMinChunkSize: 10*1024, // 单位b
      },
    },
}

如果 chunk 小于这个值则会尝试跟其他 chunk 合并，它只对纯函数有作用，如果是 console.log 就会失效

Rollup 还提供了 treeshake.manualPureFunctions 参数来让开发者指定哪些函数是纯函数，所以可以这样配置

output: {
  experimentalMinChunkSize: 1000,
},
treeshake: {
  preset: 'recommended',
  manualPureFunctions: ['console.log'],
},

在开发 JS 模块的时候要尽量避免模块副作用

Treeshaking

Treeshaking：保证代码运行结果不变的前提下，去除无用的代码

Vue3 会默认使用 Rollup 进行 treeshaking ，不需要额外进行配置。但有一个条件，必须是 ES6 module 模块才行

import { cloneDeep } from 'lodash'

const obj = cloneDeep({})

上面 lodash 是使用 CommonJS 规范的模块，所以无法进行 treeshaking ，Vue 会把整个 lodash 依赖打包进来，整个文件会特别大。所以，需要更改为使用 ESM 版的 loadsh ，实现按需引入

import { cloneDeep } from 'lodash-es'

const obj = cloneDeep({})

去除debugger 和 console

第一种方法，使用 esbuild（官方推荐）

项目上，使用的是这个方案

build: {
  esbuild: {
    drop: ['console', 'debugger'] }
  }
}

第二种方法，使用 terser 插件

npm i terser -D

在 vite.config.ts 中配置插件

build: {
    //移除生产环境log
    minify: 'terser',
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    }
  }

CDN 加速

通过配置 CDN 让用户从最近的服务器请求资源，提升网络请求的响应速度。

使用 vite-plugin-cdn-import 配置，以 lodash 为例

// vite.config.js
import { defineConfig } from 'vite'
import viteCDNPlugin from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    viteCDNPlugin({
      // 需要 CDN 加速的模块
      modules: [
        {
          name: 'lodash',
          var: '_',
          path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
        }
      ]
    })
  ]
})

lodash 在代码使用方式

import _ from 'lodash'

const obj = _.cloneDeep({})

构建成功后，Vite 会自动帮我们将 cdn 资源通过 script 标签插入到 html 中

路由懒加载

路由懒加载，即当打开页面时才去加载对应文件，利用 Vue 的异步组件就可以实现懒加载

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/login',
      component: () => import('@/views/login/index')
    }
    // ...
  ]
})

开启HTTP2

浏览器有请求并发限制，一般是 6 个，超过限制请求需要排队，之前可以通过域名分发、资源合并来解决，而使用 HTTP2 协议后，其可以在一个TCP连接分帧处理多个请求（多路复用），不受此限制。（头部压缩也带来了一定性能提升）

在 Nginx 中开启 HTTP2：

// nginx.conf 
listen 443 http2;

// 重启Nginx
nginx -s stop && nginx

vite环境基本配置

import {
    defineConfig,
    normalizePath
} from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import ViteRestart from 'vite-plugin-restart'
import timeReporter from 'vite-plugin-time-reporter'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import envCompatible from 'vite-plugin-env-compatible'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { visualizer } from 'rollup-plugin-visualizer'
import viteImagemin from 'vite-plugin-imagemin'
import viteCompression from 'vite-plugin-compression'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import Components from 'unplugin-vue-components/vite' // 组件库按需加载
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 组件库解析器
import AutoImport from 'unplugin-auto-import/vite'
import ElementPlus from 'unplugin-element-plus/vite'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'


// 全局 scss 文件的路径
// 用 normalizePath 解决 window 下的路径问题
const variablePath = normalizePath(path.resolve('./src/assets/styles/mixin.scss'))

export default defineConfig(({ command, mode }) => {
    // 根据当前工作目录中的 `mode` 加载 .env 文件
    // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
    // const env = loadEnv(mode, process.cwd(), '')

    // 插件
    const plugins = [
        vue(),
        vueJsx(),
        vueSetupExtend(),
        ViteRestart({
            restart: ['my.config.[jt]s']
        }),
        // 按需引入 toast 等样式
        ElementPlus(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
            dts: false,
            include: [
                /\.[j]sx?$/, // .ts, .tsx, .js, .jsx
                /\.vue$/, /\.vue\?vue/ // .vue
            ],
            imports: [
                'vue',
                'vue-router'
            ],
            eslintrc: {
                enabled: true, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
                filepath: './.eslintrc-auto-import.json', // 生成json文件
                globalsPropValue: true
            }
        }),
        // 按需加载组件库 element-plus
        Components({
            dts: false, // 不生成 components.d
            resolvers: [
                ElementPlusResolver()
            ]
        }),
        // 兼容 commonjs
        viteCommonjs(),
        // 兼容 webpack 环境变量
        envCompatible(),
        createSvgIconsPlugin({
            iconDirs: [
                path.resolve(process.cwd(), 'src/assets/svg')
            ],
            symbolId: 'icon-[name]'
        }),
        viteImagemin({
            gifsicle: {
                optimizationLevel: 7,
                interlaced: false
            },
            optipng: {
                optimizationLevel: 7
            },
            mozjpeg: {
                quality: 20
            },
            pngquant: {
                quality: [0.8, 0.9],
                speed: 4
            },
            svgo: {
                plugins: [
                    {
                        name: 'removeViewBox'
                    },
                    {
                        name: 'removeEmptyAttrs',
                        active: false
                    }
                ]
            }
        }),
        viteCompression(
            {
                algorithm: 'gzip',
                threshold: 10240 // 体积大于 10k 阈值进行压缩，单位 b
                verbose: false,
                deleteOriginFile: true
            }
        ),
        timeReporter(),
        // 包分析插件, 放在最后
        visualizer({
            gzipSize: true,
            brotliSize: true,
            emitFile: false,
            filename: 'stats.html', // 分析图生成的文件名
            open: true // 如果存在本地服务端口，将在打包后自动展示
        })
    ]

    return {
        plugins,
        resolve: {
            alias: [
                {
                    find: '@',
                    replacement: path.resolve(__dirname, 'src')
                },
                {
                    find: '~@',
                    replacement: path.resolve(__dirname, 'src')
                }
            ],
            extensions: [
                '.mjs',
                '.js',
                '.jsx',
                '.vue'
            ]
        },
        // base: './',
        server: {
            strictPort: false,
            port: 8080,
            open: true,
            proxy: {
                '/XXX': {
                    target: 'XXX/',
                    changeOrigin: true
                }
            }
        },
        // css 相关的配置
        css: {
            postcss: {
                plugins: [
                    tailwindcss,
                    autoprefixer
                ]
            },
            preprocessorOptions: {
                scss: {
                    // additionalData 的内容会在每个 scss 文件的开头自动注入
                    additionalData: `@import "${variablePath}";`
                }
            }
        },
        build: {
            outDir: 'dist',
            chunkSizeWarningLimit: 500,
            rollupOptions: {
                output: {
                    chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
                    entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
                    assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
                    experimentalMinChunkSize: 10 * 1024, // 单位b 没有副作用，合并较小的模块
                    manualChunks (id) {
                        if (id.includes('/lodash')) {
                            return 'lodash'
                        }
                        if (id.includes('/@vue')) {
                            return 'vue-use'
                        }
                        if (id.includes('/node_modules/')) {
                            return 'vendor'
                        }
                    }
                }
            }
        },
        // 不走打包的，静态资源目录，解决移动目录，出现没有权限
        publicDir: path.resolve(process.cwd(), 'public'),
        optimizeDeps: {
            entries: ['/index.html']
        }
    }
})

Vite 常用配置解释

{
  root: process.cwd(), // 项目根目录（index.html 文件所在的位置）,
  base: '/', // 开发或生产环境服务的公共基础路径 配置引入相对路径
  mode: 'development', // 模式
  plugins: [vue()], // 需要用到的插件数组
  publicDir: 'public', // 静态资源服务的文件夹
  cacheDir: 'node_modules/.vite', // 存储缓存文件的目录
  resolve: {
    alias: [ // 文件系统路径别名
      {
        find: //@//,
        replacement: pathResolve('src') + '/'
      }
    ],
    dedupe: [], // 强制 Vite 始终将列出的依赖项解析为同一副本
    conditions: [], // 解决程序包中 情景导出 时的其他允许条件
    mainFields: [], // 解析包入口点尝试的字段列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 导入时想要忽略的扩展名列表
    preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径确定文件身份
  },
  css: {
    modules: {
      scopeBehaviour: 'global' | 'local',
      // ...
    },
    postcss: '', // 内联的 PostCSS 配置 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源
    preprocessorOptions: { // css的预处理器选项
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  },
  json: {
    namedExports: true, // 是否支持从.json文件中进行按名导入
    stringify: false, //  开启此项，导入的 JSON 会被转换为 export default JSON.parse("...") 会禁用按名导入
  },
  esbuild: { // 最常见的用例是自定义 JSX
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  },
  assetsInclude: ['**/*.gltf'], // 指定额外的 picomatch 模式 作为静态资源处理
  logLevel: 'info', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
  clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
  envDir: '/', // 用于加载 .env 文件的目录
  envPrefix: [], // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中
  server: {
    host: '127.0.0.1', // 指定服务器应该监听哪个 IP 地址
    port: 5000, // 指定开发服务器端口
    strictPort: true, // 若端口已被占用则会直接退出
    https: false, // 启用 TLS + HTTP/2
    open: true, // 启动时自动在浏览器中打开应用程序
    proxy: { // 配置自定义代理规则
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    },
    cors: true, // 配置 CORS
    force: true, // 强制使依赖预构建
    hmr: { // 禁用或配置 HMR 连接
      // ...
    },
    watch: { // 传递给 chokidar 的文件系统监听器选项
      // ...
    },
    middlewareMode: '', // 以中间件模式创建 Vite 服务器
    fs: {
      strict: true, // 限制为工作区 root 路径以外的文件的访问
      allow: [], // 限制哪些文件可以通过 /@fs/ 路径提供服务
      deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单
    },
    origin: 'http://127.0.0.1:8080/', // 用于定义开发调试阶段生成资产的 origin
  },
  build: {
    target: ['modules'], // 设置最终构建的浏览器兼容目标
    polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill
    outDir: 'dist', // 指定输出路径
    assetsDir: 'assets', // 指定生成静态文件目录
    assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
    cssCodeSplit: true, // 启用 CSS 代码拆分
    cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
    sourcemap: false, // 构建后是否生成 source map 文件
    rollupOptions: {}, // 自定义底层的 Rollup 打包配置
    lib: {}, // 构建为库
    manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
    ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
    ssr: undefined, // 生成面向 SSR 的构建
    minify: 'esbuild', // 指定使用哪种混淆器
    terserOptions: {}, // 传递给 Terser 的更多 minify 选项
    write: true, // 启用将构建后的文件写入磁盘
    emptyOutDir: true, // 构建时清空该目录
    brotliSize: true, // 启用 brotli 压缩大小报告
    chunkSizeWarningLimit: 500, // chunk 大小警告的限制
    watch: null, // 设置为 {} 则会启用 rollup 的监听器
  },
  preview: {
    port: 5000, // 指定开发服务器端口
    strictPort: true, // 若端口已被占用则会直接退出
    https: false, // 启用 TLS + HTTP/2
    open: true, // 启动时自动在浏览器中打开应用程序
    proxy: { // 配置自定义代理规则
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    },
    cors: true, // 配置 CORS
  },
  optimizeDeps: {
    entries: [], // 指定自定义条目------该值需要遵循 fast-glob 模式
    exclude: [], // 在预构建中强制排除的依赖项
    include: [], // 可强制预构建链接的包
    keepNames: false, // true 可以在函数和类上保留 name 属性
  },
  ssr: {
    external: [], // 列出的是要为 SSR 强制外部化的依赖,
    noExternal: '', // 列出的是防止被 SSR 外部化依赖项
    target: 'node', // SSR 服务器的构建目标
  }
}