vue3 + vite 项目打包优化

vue项目打包之后生成的dist包体积太大，超过10M, 进行影响项目加载速度。本文章从作者的实践操作写出如何做项目优化。

一、分析包体积过大的原因

项目初始打包体积为10.6M。

使用 rollup-plugin-visualizer 做打包视图分析。

安装命令：

npm install --save-dev rollup-plugin-visualizer

在vite.config.js中引入

import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true,
      emitFile: false,
      filename: 'stats.html',
      sourcemap: false,
    }),
  ],
})

配置参数：

参数	类型	解释
filename/file	string	生成分析的文件名
title	string	html标签页标题
open	boolean	以默认服务器代理打开文件
template	string	可选择的图表类型
gzipSize	boolean	搜集gzip压缩包的大小到图表
BrotliSize	boolearn	搜集brotli压缩包的大小到图表
emitFile	boolean	使用emitFile生成文件，简单说，这个属性为true,打包后的分析文件会出现在打包好的文件包下，否则就会在项目目录下
sourcemap	boolean	使用sourcemap计算大小
projectRoot	string	RegExp 文件的根目录，默认在打包好的目录下

设置完后，可以看到一个stata.html, 在浏览器打开后可以看到项目体积分析报告

二、根据项目情况优化

从报告中得到，引入的@antv/g2 包较大，但是只使用了一部分的图表功能，从此入手。

三、对vite进行配置

1. 通过manualChunks对打包文件进行拆分
2. commonjsOptions 允许你控制 Vite 如何将 CommonJS 模块转换为 ESModules，以确保它们与 Vite 的构建流程兼容

  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            if (id.includes('element-plus'))
              return 'element-plus'
            if (id.includes('echarts'))
              return 'echarts'
            if (id.includes('date-fns'))
              return 'date-fns'
            if (id.includes('crypto-js'))
              return 'crypto-js'
            if (id.includes('axios'))
              return 'axios'
            return 'vendor'
          }
          return 'index'
        },
        experimentalMinChunkSize: 10 * 1024, // 单位b, 合并较小模块
      },
    },
    commonjsOptions: {
      include: [/node_modules/],
    },
  },