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

[luxiaoxiao5056]

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

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

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

[fz6m]

如果你的多语言占了很大体积，就动态加载吧，参考 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 以内都是正常的。

[luxiaoxiao5056]

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

[Freedom-FJ]

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