常规VUE项目优化实践，跟着做就对了！

总结：

主要优化方式：

1. imagemin优化打包大小（96M->50M），但是以打包速度为代价，通过在构建过程中压缩图片来实现，可根据需求开启。
2. 字体压缩：目前项目内引用为思源字体，打包为24M。实践通过压缩字体会导致丢失一些属性，而字蛛等插件压缩只支持静态资源，对服务端获取的数据无法完美匹配。
   目前解决方案，仅用SourceHanSansSC-Medium字体，舍弃Normal及Regular字体。
3. Gzip前端（50M->46M）针对css,js等代码进行压缩。
4. Gzip服务端（通过nginx.conf的镜像文件实现前端配置）
5. 本地构建速度(134s->67s)：通过引入CDN和Echarts按需加载方式提升本地构建速度，目前已接近优化的极限，因为目前项目基本框架为vben-admin（官网并不推荐，后期为更换为vben-admin-thin，官网纯净版代码打包速度为122s）

仍需优化：

1. 服务端用pnpm（官网推荐，下载，打包速度更快）
2. 删除框架内无用的组件（可更换为vben-admin-thin一劳永逸)

以下为详情过程~

dev环境现况：

● LCP (Largest Contentful Paint) 代表的是视窗最大可见图片或者文本块的渲染时间。一般是至少75%用户能够在2.5秒内。

● 项目打包为将近97M

● 本地构建速度约134s。

具体步骤：

1、安装 rollup-plugin-visualizer 插件，此插件可以展示构建时长、chunk 数量及大小，目前可以分析为项目内最大占比为静态资源。

2、通过imagemin插件压缩图片并删除无用图上，压缩后的体积减少到50M

3、gzip前端代码压缩
4、cdn引入的vue, vue-router ,ant-design-vue
5、按需加载echarts

现况：
● 打包后的体积为46M
● 可以看到目前最大的模块不再是静态资源 而是echarts等外部资源库

● 同样以我本地为测试环境，打包速度优化至65s

● 优化后的首屏加载速度为2s内