记录一次后台项目的打包优化

前言

优化，所有开发者到一定的程度上，都绕不开的问题之一

例如：

• 首页加载优化
• 白屏优化
• 列表无限加载滚动优化，图片加载优化
• 逻辑耦合，复杂度优化，如何降低复杂度
• 打包优化

以上这些，只是简单举例，类似的优化其实还有很多，诸如此类的优化，如果细细拆分开来，其实感觉不会带来多大效果，但是组合起来，还是能让人大吃一惊
以下是我分享一次打包优化的过程

分析问题

● 什么是打包？打包通常分为那几步？
○ 两步：transform-代码转化or编译（提高转化速度）、chunk-代码分割（减少chunk生成）
○ transform：compiler-sfc rollup
○ chunk：减少

● 区分开发环境和生产环境
○ 比如 sourcemap
○ 生产环境不需要的 plugin

● 是否支持多线程打包？(很大)

● 是否能够缓存打包产物？(很大)

寻找切入点

● 移除生产环境不需要的 plugin 和 配置
○ plugin：不同的钩子 vite-plugin-html
○ sourcemap: 移除

● 提升 tranform （切入点小， @vitejs/plugin-vue @vue/compiler-sfc ）

● 减少 chunk 生成（文件创建写入需要大量时间）

● 多线程？

● 增量打包？

根据切入点逐一尝试

1. 移除生产环境不需要的 plugin 和 配置优化前: 227s
   
   ● 移除 auto-import 自动生成 ts 类型
   
   ● 移除 visualizer 打包分析插件
   
   ● 移除打包进度插件
   
   
   ● 移除开发服务器（虽然没啥用，但影响美观）
   
   ● 关闭 sourcemap
   
   以上去掉后，再次打包，优化后: 101s
   
2. 提升 transform 的转化速度优化前: 101s

使用 compiler-sfc 编译单文件 vue，js 部分走的 rollup
侧面切入（第三方包 cdn，减少了 transform 代码块，亦能减少 chunk 生成）
减少 chunk 生成
这里其实计划的还是通过cdn引入第三方包，来减少chunk 生成

● 三方包走 cdn（走 cdn 需要注意点，国外 cdn 大部分时间被墙，国内 cdn 也存在请求失败问题）

优化后: 63s，但这里是存在一些坑的

cdn引入node包遇到的一些问题记录

1. cdn 不稳定性（非内部资源）

解决方案：cdn 资源内部化
优点：意思就是我们将对应的node包版本下载下来，放在自己服务器上，然后使用自己的cdn加速访问，这样就能保证稳定性
缺点：这样也存在一些缺陷问题，就是很有可能本地好的，放到远程上就有问题了，因为包的版本不一样，除此之外如果后续想要更新包版本，需要更新远程上之前下载的node包

2. vue 和 pinia 同时引入

这里会引发一些错误
对应issue：cdn错误问题地址
原因：pinia 依赖 vue-demi 而 vue-demi 又需要 vue，其实就是相互依赖，其实也很好解决，就是加载顺序问题
解决方案：在 pinia 之前 vue 之后引入 vue-demi

3. 顺便手动分包下，目的是将node里面的和业务逻辑的区分开来

优化后：63s => 56s

最终结果

多线程？

• 不支持

增量打包，打包缓存？

• 不支持

所以最终效果大概就是从227s -> 56s

声明：由于每个设备性能不一样，其实打包效率是有差距，以上打包耗费时间仅在个人设备上的结果，以上内容仅是个人记录仅供参考，希望对各位有所帮助。。。