项目是个admin项目，由于业务代码比较多，并且也安装了不少依赖。导致每次部署，得花10分钟左右，导致测试也苦不堪言。通过安装rollup-plugin-visualizer插件，分析了下项目，打出的包竟然有整整30M。每天部署简直就是浪费生命，开始着手优化。
主要从以下几个方面入手：
1.cdn引入
如图可见，最大的几个包都是可视化的一些依赖，如echarts、@antv/g6，因为我们公司买的有七牛云的服务，平常每次部署，都是直接将项目打完包上传到七牛云，故此把七牛云作为CDN服务器，各个大的依赖上传完大致是这样的。（就是在node_modules里将各个包找到，手动上传上去）
项目里如何引用？
通过安装vite-plugin-cdn-import插件，以下是相关配置
如果没有七牛云，可在网上找免费的cdn服务，但仅限于用在非线上环境（以免服务指不定哪天挂了后，会导致项目也挂了）
如何查找node_modules的中某个依赖是具体引用那个文件？ 以element-ui为例，在包文件夹中，查看package.json文件
可以看到，main所指的一般就是入口文件，如果没有就是index.js。 但也有例外，以echarts为例，这是其package.json
并不存在main，直接引用index.js，部署完后用到图表的地方会报错。
这个时候，可以在www.jsdelivr.com/ 这个网站上查一下，具体引用的是那个入口文件，以我用的4.7.0版本为例。
可以看到用的是dist目录下的echart.min.js
2.通过gzip压缩
用的是vite-plugin-compression插件，只需要在vite.config.js里的plugin配置
3.升级vite
之前用的vite3，这次直接将vite升级到最新版本4.4.9
其他相关优化
1.动态路由引用
2.生产环境溢出console、debugger
网上都能查到，故不在此赘述
优化后的结果
目前是包体积减少到20M，打包时间减少到6分钟，目前还有些优化空间，我再研究研究
