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进行配置
build: {rollupOptions: {output: {manualChunks: (id) => {if (id.includes('/node_modules/@antv'))return 'antv'if (id.includes('/node_modules/element-plus'))return 'element'if (id.includes('node_modules'))return 'vendor'return 'index'},experimentalMinChunkSize: 10 * 1024, // 单位b, 合并较小模块},},},
