有个内部项目，主打一个又大又慢，登录页加载估计5s以上，页面刷新3s以上。开整。
问题解析
- 使用无痕浏览器，停用缓存，查看network，看首屏加载时间，对优化前的性能有个定位。（图片是优化后的，仅供参考）
- 安装rollup-plugin-visualizer ，分析打包文件，定位要优化的资源
npm i rollup-plugin-visualizer -D
使用插件
// vite.config.js中
import { visualizer } from 'rollup-plugin-visualizer'；
plugins:[visualizer({open: true})];
执行打包命令后会在项目根目录下生成一个start.html文件，浏览器打开即可看到打包资源文件大小。下面的截图就是优化前的资源分布，右侧红色系的main.js十分庞大，占据半壁江山，这就是不合理的地方了。
优化步骤
-
纯前端优化：拆分main.js。
从上图定位main.js中面积较大的块，有echarts,wangEditor,loadsh,element-plus。将这几个包拆分出来，vite有简单的设置方式：
//vite.config.js
build: {
rollupOptions: {
output: {
manualChunks:{
'chunck-render':['vue','vue-router','wangEditor','lodash'],
'element-plus':['element-plus','@element-plus/icons-vue'],
'echarts':['echarts'],
'echarts-gl-liq':['echarts-gl','echarts-liquidfill'],
}
}
},
},
我这里拆包的原则是，每个包的大小尽量小且相近，因此将vue和一些小插件放在一起了，最终打包的js文件有6个，每个文件是在180kb - 350kb之间（压缩后）。
这里有个坑，我的项目如果把node_modules中的每个插件都单独打包，请求文件达到了几十个，反而对速度有副作用。可以平衡一下文件数量和大小，得到最快的速度。
优化后的资源分析如下，main.js拆分为大小相近的块，这样加载资源更合理：
2.开启GZIP，大幅度提升加载速度，有多快呢，以单个文件举例,原文件和压缩文件：
其实这一步才是最重要，见效最快的。为了能够正常请求压缩文件，我们需要这样的响应头：
需要后端配置nginx，我们的项目是若依框架，官网有文档，对后端同事来说十分简单，若依相关文档
-
压缩图片 通过以上两步，其实已经做到了90%的优化，但是我发现我们这个项目，是个后台管理系统，总共就登录页和注册页几张图片，万万没想到相关图片大小有6M！应该是ui直出的高质量图片。
因为图片很少，没有使用压缩插件，选择了手动压缩：
使用tiny.png对图像进行压缩处理，将6M的图片压缩至1M左右，视觉上几乎看不出来区别。
综上，可以收工啦。可以截图优化后的network加载时间和优化前对比，量化优化工作。
