项目基于 umi4 开发,打包后 20M,umi.js 文件 8M,在 umi4 中如何进行拆包?我可以尝试哪些优化? #11884

项目基于 umi4 开发,打包后 20M,umi.js 文件 8M,在 umi4 中如何进行拆包?我可以尝试哪些优化? #11884

 Answered by fz6m
luxiaoxiao5056 asked this question in Q&A
 
 
 
 
 
luxiaoxiao5056
on Nov 21, 2023
 

下方是我打开代码分析后生成的分析图,umi.js 文件中多语言文件占了很大比重,是否应该把这个地方单独分包?

image

下方是访问测试环境登录页面的加载情况,需要 16s 才最终加载出来,该如何进行优化呢?

image

官网上给出的三种分包配置都试过了,没有明显的速度或体积变化,使用 chainWebpack(config) 的方式进行分包会在编译的时候卡住,运行会显示一片空白。是不支持使用 chainWebpack 进行配置了吗?

 
Answered by fz6mon Nov 21, 2023

如果你的多语言占了很大体积,就动态加载吧,参考 i18n 这个章节,自己做一个切换语言的组件和逻辑(可参考 ./src/.umi/plugin-locales/* ),等到用户切换的时候去动态拉取语言文件( json 或 await import('./path/to/locales/lang/xxx') )再 addLocale ,拉完了再用导出的 i18n 方法 setLocale 改变语言就行,其他语言就可以从默认 umi.js 里全部拆出去了。

参考 代码拆分指南 :

  1. 如果你有编辑器或者图表的页面,最好把这些组件手动懒加载拆出去,但 umi 已经按页默认拆包了,如果你想提升首屏开的速度,最好重点针对第一屏拥有的东西做拆分。

  2. 可以试试 codeSplitting 里面的 depPerChunk 和 granularChunks 这俩方案,能把依赖单独拆出去变为 js 包,这样可以降低默认 umi.js 的包大小。

砍掉 locales 和用了 codeSplitting 策略之后估计能少 5-6 M 左右,antd 和 antd icon 因为每个页面都有,预计能带来 3 M 左右的大小,这个没法避免,如果 umi.js 在 3-5 M 都是可以接受的,因为 cdn 缓存的话,第一次加载完之后就缓存了,第二次进系统不需要下载 js 很快的(如果没有做 cdn 或者 nginx 网关缓存响应头的话自己做一下)。

剩下能扣的优化比如把固定依赖变成 umd external 加载(仅生产),比如:

// .umirc.ts

 externals: isProd …
 

Replies:2 comments · 1 reply

 
 
fz6m
on Nov 21, 2023
Maintainer

如果你的多语言占了很大体积,就动态加载吧,参考 i18n 这个章节,自己做一个切换语言的组件和逻辑(可参考 ./src/.umi/plugin-locales/* ),等到用户切换的时候去动态拉取语言文件( json 或 await import('./path/to/locales/lang/xxx') )再 addLocale ,拉完了再用导出的 i18n 方法 setLocale 改变语言就行,其他语言就可以从默认 umi.js 里全部拆出去了。

参考 代码拆分指南 :

  1. 如果你有编辑器或者图表的页面,最好把这些组件手动懒加载拆出去,但 umi 已经按页默认拆包了,如果你想提升首屏开的速度,最好重点针对第一屏拥有的东西做拆分。

  2. 可以试试 codeSplitting 里面的 depPerChunk 和 granularChunks 这俩方案,能把依赖单独拆出去变为 js 包,这样可以降低默认 umi.js 的包大小。

砍掉 locales 和用了 codeSplitting 策略之后估计能少 5-6 M 左右,antd 和 antd icon 因为每个页面都有,预计能带来 3 M 左右的大小,这个没法避免,如果 umi.js 在 3-5 M 都是可以接受的,因为 cdn 缓存的话,第一次加载完之后就缓存了,第二次进系统不需要下载 js 很快的(如果没有做 cdn 或者 nginx 网关缓存响应头的话自己做一下)。

剩下能扣的优化比如把固定依赖变成 umd external 加载(仅生产),比如:

// .umirc.ts

 externals: isProd ? {
   react: 'window.React',
   'react-dom': 'window.ReactDOM'
 } : {},
 scripts: isProd ? ['...', '...'] : []
 

用 externl 外置一些固定库还能抠出来 300KB (看情况自己扣不扣)。

大型复杂依赖多的 to B 系统基本上预期 umi.js 在 10-20 M 以内都是正常的。

1 reply
@luxiaoxiao5056

非常感谢,已经按照您的建议进行优化。使用 codeSplitting 策略,然后加上拆分语言包,umi.js 从 8M 减少到了 3M。加载时间不到原来的一半。

Answer selected by luxiaoxiao5056
 
 
Freedom-FJ
on Nov 29, 2023
 

这种资源都是有线上cdn的情况,如果是一些没有线上cdn的我该怎么办可以使用dill方案像webpack一样自己打包出来一个么

 

posted on   漫思  阅读(42)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2022-12-28 2022年总结-五年的时间才明白业务的重要性
2022-12-28 .net core-利用PdfSharpCore 操作PDF实例
2022-12-28 Remix 1.9 发布,全栈框架
2022-12-28 微软工程师展望 Rust 2023:重写编译器、解决管理问题
2022-12-28 Visual Studio 现已内置 Markdown 编辑器
2018-12-28 vue数组中对象属性变化页面不渲染问题

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示