记一次Vite打包优化
前言
近期为了上线 Module Federation ，发现项目 Vue-cli 版本太低用不了，就顺便把应用用 Vite 重新配置了下，发现打包后页面加载速度不理想，故开启一段优化之旅
目标和指标
既然要优化，那就必须有目标，能量化
目标
本次优化目标
- 正常网速下，2s内加载完成
指标
关于指标，这里简单介绍下常见的优化指标
- FCP（First Contentful Paint）：白屏时间（第一个文本绘制时间）
- Speed Index：首屏时间
- TTI（Time To Interactive）: 第一次可交互的时
- lighthouse score：Chrome浏览器审查工具性能评分
开始性能分析
我们大部分的性能分析都可以借助 Chrome 完成，大致可以分为
Network 分析
Lighthouse 分析
Bundle 分析
Network 分析
从网络加载状态看可以发祥有一个 1.9MB 的 index.js 文件占用了比较大的加载时间，阻塞了其它资源的加载，是一个优化点
Lighthouse 分析
使用
结果
前面我们罗列的一些指标都可以在这里直观的看到数值，记录下来为我们调优后进行参考指标对比
Bundle 分析
因为使用的是 vite，借助插件 rollup-plugin-visualizer，来进行 bundle 分析
安装
pnpm i rollup-plugin-visualizer -D引入
import { visualizer } from 'rollup-plugin-visualizer'
const plugins = [vue(), visualizer()]打包之后会在项目根目录生成 stats.html 文件，打开
分析可以看出之前 index.js 加载慢很大一部分原因是因为加载了 echarts 包，这就给我门优化提供了方向
开始优化
通过之前的分析，主要的加载优化方向还是大体积文件瘦身（之前已经做过 gzip 的优化，如果没做过的同学强烈推荐，可以极大提升加载速度）
GZIP 配置
这里顺便介绍下 vite 的 GZIP 配置
安装 vite-plugin-compression
npm i vite-plugin-compression -D修改 vite.config.js 配置
import viteCompression from 'vite-plugin-compression'
plugins: [vue(), viteCompression()]打包后就会生成 gzip 文件了，但是服务端 nginx 还需要配置一下才能生效
http {
gzip_static on;
gzip_proxied any;
}具体也可以看看我的这篇文章，有详细介绍
系统介绍浏览器缓存机制及前端优化方案
echarts 单独拆分
修改 vite.config.js 配置
build: {
rollupOptions: {
output: {
manualChunks: {
echarts: ['echarts']
}
}
}
}打包后 Index.js 体积变化(未压缩前)
Before: 4.49MB
After: 1.34MB
图片压缩
安装 vite-plugin-imagemin
npm i vite-plugin-imagemin -D修改 vite.config.js 配置
import viteImagemin from "vite-plugin-imagemin"
plugins: [vue(), viteImagemin()]打包后会生成压缩的图片，但是每次打包都会重新压缩一遍，比较浪费时间，如果不介意的话采用此方案也很简单，网上查了一下有使用本地压缩的方案，不过配置比较繁琐，就自己写了个插件，后续会有文章单独介绍，敬请关注
结果分析
Network 分析
加载时间 平均节省 1 秒
Lighthouse 分析
分数由 46 提升到 52
Bundle 分析
主包体积缩小 1 M 左右
总结
到此本次优化告一段路，基本达到预期效果，不过遗留了一些问题，像引用 video 插件相关的一些页面想用开头提到的组件联邦 Module Federation来做，但是加载时部分手机浏览器出现兼容问题未能完成，后续等解决了兼容问题在单独写一篇总结 ^-^