我是如何把 Vite 的打包时间从 110s 优化到 25s 的

前言

2022年12月公司因为经营问题，被迫裁员。

产研为裁员重灾区，身为前端开发的我理所当然的没有逃过这一劫。

好在虽被裁，但技术尚可，年龄不大，所以很快找到了新公司。

今年年初入职了现在这家公司，公司规模不大，成立不久，没有技术包袱，前端全部采用当下最新技术开发。

这很不错！！

打包现状

我负责的系统采用 Vue3 + Vite 的组合进行业务开发（尤大开发利器在开发过程中体验很好）

经过一段时间的开发，我发现现有系统在打包时很慢，如下图：

这是我截取的阿里云效打包时间，大家可以看到，打包开始时间为：13:22:14，打包结束时间为 13:24:04，足足有110s。

这这这，开发启动一秒，打包完成两分钟。

这不能忍啊！！

你要问我为啥不能忍，我只能说阿里云效构建时长有限，每月都悠着用，月底还超额，只能本地构建手动扔到服务器上，你说，这谁能忍。

既然不能忍，那咱们就动手给他优化下构建时长，摆脱每月悠着用的包袱。

分析打包

声明：公司给配的 MacBookPro M1，性能很好，我本地构建时长在 48s 左右 （所以你们知道怎么优化才最快了吧，直接换性能更好的机器啊！），后续的优化对比都将以我本地的开发机为标准

说干就干！！

安装 rollup-plugin-visualizer 插件，此插件可以展示构建时长、chunk 数量及大小，是分析构建的绝佳利器。

pnpm add rollup-plugin-visualizer -D

在 vite.config.ts 文件中引入该插件:

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({ 
    plugins: [ 
        // ...
        // 将 visualizer 插件放到最后的位置 
        visualizer() 
    ] 
});

配置好分析插件后，执行 构建命令，此时在根目录下会生成一个 stats.html 文件，此文件就是当前项目打包的chunk 分析图。

打包过程分析：

• Transforms 阶段（即转换阶段，Vue转换、TS转换、高级语法转化等）耗时在 13s 左右
• Render Chunk 阶段（对代码进行合并、分割、代码分析等操作，生成目标运行代码）耗时在 35s 左右 （耗时长），且chunk数量为90个

生成chunk分析：

• 首屏chunk （scripts/spear.b3758856.js）过大为 2.24M，同时存在很多大于500kb的chunk
• 部分第三方包固定chunk也进行了打包，完全可以使用CDN引入，例如：video.js 、pdf.js

优化方案

路由动态引入

方案

路由全部采用动态引入的方式加载，减小首页 chunk 生成时间，打包的chunk越大耗时也就越多，从大chunk中分离出小chunk可以有效减少打包时间，同时提高首页的加载速度。

效果

我们可以看到，chunk由原来的90个，分成了178个，说明大chunk从首页chunk中成功分离出来了，同时打包时间缩短了6s左右。从 48s => 42s

配置 CDN 加速

方案

可以看到项目中大于500k的 chunk 有 很多，分析原因后，发现其中引入了一些外部库，Vite将外部库默认打包进了当前 chunk 中，对于这些固定的外部库，可以直接采用CDN的方式引入，无需打包进chunk中。

首先安装 rollup-plugin-external-globals 插件，该插件可以告诉 Rollup 哪些库是不需要打包的。

pnpm add rollup-plugin-external-globals