一次打包的性能优化

背景

入职新公司了，接手的项目是 vite + vue3，俺以前写过 vue2，在上家一直写的 React，因此接手项目开发倒是也没什么难度。

一切都挺顺利，就是有一点，在提测后经常能听到测试的埋怨：“xxx 前端发布的好慢啊”，一开始我也没在意，后来我上发布平台上看了下历史记录，居然每次发布都要十几分钟，这肯定是不行的。因此我开始着手优化打包速度。

分析

在发布平台上可以看到每次发布的时间，因此我首先想到的是分析打包时间，看看是哪一步耗时比较长。

首先我先在本地对项目进行生产环境打包，速度确实很慢，打包时间在 3 分钟左右，因此我决定先从打包时间入手。

1. 一眼可见项目里有个 .npmrc 文件，居然锁了 node 版本到 nodev14，这能不慢吗？在确定了node 升级没有问题的情况下，果断升级到 node 18！
2. Vite 是 v3 版本，相对于最新的 v5 版本，性能同样差了些，果断升级！
3. 来这家公司的两周前 Vue3.5 发布，节省了 56% 的内存使用，因此也可以升级！(这个个打包关系不大，寻思既然在升级就一起升了吧，有很多新特性很值得使用)

现在本地打包速度有了很大提升了，我改完后测了一下， 28 秒！。

但是当我兴冲冲地再去发布平台上发布的时候，发现发布还是很慢，但是主要问题不在打包阶段了，而是依赖下载阶段，下载依赖包的时间太长了。 我一看项目的 build 流程里还是使用的 npm 进行依赖包的管理，果断换 pnpm 啊，啥都 2024 年了，还不用 pnpm 或 bun 这类高性能的包管理工具？ 联系了公司运维，把部署脚本的 npm 换成了 pnpm，这下舒畅了！行云流水，发布时间缩短到了不到 2 分钟！

成果

拓展

鉴于公司的项目模板实在太老，借此机会，我顺带也直接把项目模板升级了，尤其是代码规范那些， 便于以后多人协作，舒服了~。