记录一次后台项目的打包优化
文章目录
- 前言
- 分析问题
- 寻找切入点
- 根据切入点逐一尝试
- cdn引入node包遇到的一些问题记录
- 最终结果
前言
优化，所有开发者到一定的程度上，都绕不开的问题之一
例如：
- 首页加载优化
- 白屏优化
- 列表无限加载滚动优化，图片加载优化
- 逻辑耦合，复杂度优化，如何降低复杂度
- 打包优化
以上这些，只是简单举例，类似的优化其实还有很多，诸如此类的优化，如果细细拆分开来，其实感觉不会带来多大效果，但是组合起来，还是能让人大吃一惊
以下是我分享一次打包优化的过程
分析问题
● 什么是打包？打包通常分为那几步？
○ 两步：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 生成（文件创建写入需要大量时间）
● 多线程？
● 增量打包？
根据切入点逐一尝试
- 移除生产环境不需要的 plugin 和 配置
优化前: 227s
● 移除 auto-import 自动生成 ts 类型
● 移除 visualizer 打包分析插件
● 移除打包进度插件
● 移除开发服务器（虽然没啥用，但影响美观）
● 关闭 sourcemap
以上去掉后，再次打包，优化后: 101s
- 提升 transform 的转化速度
优化前: 101s
使用 compiler-sfc 编译单文件 vue，js 部分走的 rollup
侧面切入（第三方包 cdn，减少了 transform 代码块，亦能减少 chunk 生成）
减少 chunk 生成
这里其实计划的还是通过cdn引入第三方包，来减少chunk 生成
● 三方包走 cdn（走 cdn 需要注意点，国外 cdn 大部分时间被墙，国内 cdn 也存在请求失败问题）
优化后: 63s，但这里是存在一些坑的
cdn引入node包遇到的一些问题记录
- cdn 不稳定性（非内部资源）
解决方案：cdn 资源内部化
优点：意思就是我们将对应的node包版本下载下来，放在自己服务器上，然后使用自己的cdn加速访问，这样就能保证稳定性
缺点：这样也存在一些缺陷问题，就是很有可能本地好的，放到远程上就有问题了，因为包的版本不一样，除此之外如果后续想要更新包版本，需要更新远程上之前下载的node包
- vue 和 pinia 同时引入
这里会引发一些错误
对应issue：cdn错误问题地址
原因：pinia 依赖 vue-demi 而 vue-demi 又需要 vue，其实就是相互依赖，其实也很好解决，就是加载顺序问题
解决方案：在 pinia 之前 vue 之后引入 vue-demi
3. 顺便手动分包下，目的是将node里面的和业务逻辑的区分开来
优化后：63s => 56s
最终结果
多线程？
- 不支持
增量打包，打包缓存？
- 不支持
所以最终效果大概就是从
227s -> 56s
声明：由于每个设备性能不一样，其实打包效率是有差距，以上打包耗费时间仅在个人设备上的结果，以上内容仅是个人记录仅供参考，希望对各位有所帮助。。。