前端打包到底应不应该拆包?

2023-03-09 12:57:50 +08:00
 fescover
用 vite 打包默认打出来只有一个集成的 js ,使用 lighthouse 加载总时间 385ms ,使用 vite 配置 buildOptions 拆包后,把安装的第三方包全部拆出来,lighthouse 加载时间 484ms ,反而变长了,分析了一下原因,第二网络请求数量增多了,第二拆出来的 js 有很多相同的模板代码。那在前端项目打包上生产环境时,到底应不应该拆包呢,拆包反而影响性能?
1488 次点击
所在节点    问与答
4 条回复
tool2d
2023-03-09 13:02:07 +08:00
让我拆包的唯一诉求就是按需加载。

服务器要走 br 压缩,肯定是单个大文件压缩效率更高。
yyfearth
2023-03-09 13:12:40 +08:00
@tool2d 主要是按需加载 减少第一次加载的时间
另外如果 js 太大 也要拆
如果包比较多 必须开启 http2 才有意义 否则可能会更慢
另外一定要开 gz 甚至 br 压缩

另外拆包还有一个好处 尤其是第三方包
就是可以长期缓存(文件名一定要加 hash )
这样一般情况下 新版本发布后 用户只要下载有变化的包

拆出来肯定有额外的代价 所以包不是越多越好
DKburNIng
2023-03-09 16:35:03 +08:00
拆大的第三方包就好了,一般大的就那么两个
Blackricky
2023-03-09 17:06:33 +08:00
三方包有 cdn 的走 cdn ,vite 配置一下 viteExternalsPlugin 。业务代码可以就放在一个包里。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/922554

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX