UmiJS 4 打包优化：把 2.6MB 的 umi.js 砍到 860KB 的四步清单

UmiJS 4 打包优化把 2.6MB 的 umi.js 砍到 860KB 的四步清单【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi生产环境 build 出来的 dist 里躺着一个 2.6MB 的 umi.jsgzip 后传输体积仍高达 840KB4G 网络下首屏实测要 6.8 秒——这是 umi.js 文件过大最典型的形态。这份 UmiJS 4 打包优化清单按「先定位、再手动拆、后自动拆、最后手动兜底」的顺序推进每一步都标了适用条件和一句避坑提示照做即可。用 ANALYZE 定位 umi.js 的体积大头别急着改配置先跑ANALYZE1 umi build构建完成后会弹出 chunk 依赖图。UmiJS 4 默认就按路由拆包页面代码已经在各自的 async chunk 里所以 umi.js 里剩下的只有三样框架运行时、被同步 import 的业务代码、以及被顺带拖进来的 node_modules 依赖。在依赖图里看哪个大圆块落在 umi.js chunk 内体积大头就清楚了。跳过这步直接改配置方向大概率会错。用 React.lazy 把大依赖移出主包 这是缩同步主包最直接的杠杆适用场景某个组件引用了体积可观的第三方库图表、富文本编辑器这类。import { lazy, Suspense } from react; const Editor lazy(() import(./Editor)); // 大库连同依赖链一起拆出去 export default function Page() { return ( Suspense fallback{divloading/div} Editor / /Suspense ); }⚠️ 避坑不是每个组件都值得 lazy 化。一个 5KB 的组件单独拆 chunk换来的是一次额外网络请求纯亏。拆分的判断单位应该是「组件 它引的大库」预期 chunk 超过 100KB 再动手。用 granularChunks 自动分块大库拆走之后剩下那些散落的第三方依赖交给框架自动处理两行配置export default { codeSplitting: { jsStrategy: granularChunks, }, };granularChunks 人话版就是按粒度自动拆包把 react、react-dom、history、react-router 归进独立的 framework chunk超过 160KB 的第三方依赖各自成块被两个以上异步页面引用的公共模块进 shared chunk。改哪个模块用户就只重新下载那一块缓存命中率明显高于整包。看实现源码 packages/preset-umi/src/features/codeSplitting/codeSplitting.ts 会发现一个易踩的细节它的 lib、shared 分组都是chunks: async只处理异步 chunk——所以它救不了同步依赖这部分要靠上一步的 lazy 或下一步的 splitChunks。官方思路可对照代码拆分指南。用 splitChunks 拆同步 node_modules前两步做完如果 umi.js 文件过大仍超 1MB且大头是同步引入的依赖就手动兜底export default { chainWebpack(memo) { memo.optimization.splitChunks({ chunks: all, // 关键让同步主 chunk 也参与拆分 cacheGroups: { vendors: { name: vendors, test: /[\\/]node_modules[\\/]/, priority: -10, // 低优先级别抢走 framework 分组 }, }, }); }, };拆出的 vendors.js 内容基本恒定首次加载后长期命中缓存单独放 CDN 就行传输体积则交给服务器端 Brotli/Gzip这决定真实加载耗时。⚠️ 避坑priority 别高于 framework 分组的 40否则会把本应在 framework chunk 里的 react 再抢进 vendors产物里出现两份。优化前后产物对比以 40 个页面、首屏 1 条路由的中后台项目为例4G 约 150KB/s 有效速率指标优化前优化后umi.js 主包2.6 MB860 KB主包 gzip 传输量840 KB260 KB首屏 JS 总量2.6 MB约 1.1 MB主包 framework 首屏路由首屏加载耗时6.8 s3.2 s小改动的缓存失效范围整个 umi.js仅对应路由 chunk下次再遇到 umi.js 膨胀动作固定为三条ANALYZE1 umi build看体积落在哪大库组件改 lazy补上 granularChunks 配置。若主包仍不降再考虑 splitChunks 兜底。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考