UmiJS 4 打包优化指南3 步把 umi.js 主包砍掉 60%【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi如果你的 UmiJS 4 项目跑完生产构建产出一个 2MB 往上的 umi.js首屏要转 5 秒才出内容那问题就出在 umi.js 文件过大上。按下面三步做完你的项目就能完成一轮完整的 UmiJS 代码分割粒度化分块、大组件懒加载、vendors 分包通常主包能直接砍掉一半。 快速自检主包是不是已经超标动手前先确认是不是真有这问题两条命令就够ls -lh dist/umi.js npx source-map-explorer dist/umi.js如果ls显示主包超过 1MB就该动手了source-map-explorer 里如果看到 node_modules 或某个业务页面占了一整块说明你的 UmiJS 4 分包策略基本没生效。反过来主包只有几百 KB 的话可以先收藏这篇不急着改。1️⃣ 第一步启用粒度化分块让框架自动分包该做什么在.umirc.ts里加一个codeSplitting配置让框架按路由和依赖粒度去拆不用你手写 webpack 规则。export default { codeSplitting: { jsStrategy: granularChunks, // ← 新增按粒度化策略分包 }, }为什么选这一行granularChunks会把 react、react-dom、react-router 这类框架依赖单独打成 framework 块把体积超 160KB 的依赖逐个拆成 lib 块多个路由共享的模块归到 shared 块。注意它只在生产构建时生效本地npm run dev验证是看不到变化的。改完的效果umi.js 里只剩入口逻辑各路由变成按需加载的 chunk主包一般立掉 30%~40%。如果做到这一步体积还没达预期继续第二步把体积大的业务组件也拆出去。2️⃣ 第二步只给大体量组件上懒加载这一步的关键是只改体积大的组件不要全局 lazy——首屏组件全懒加载页面只会更慢。import { Suspense, lazy } from react; const ReportPanel lazy(() import(./ReportPanel)); // ← 改动静态引入改动态 Suspense fallback{Spin /} ReportPanel / /Suspense判断标准就一条source-map-explorer 里这个组件的块超过 100KB且不在首屏就换成React.lazy。改完效果是这部分体积从主包里彻底消失浏览器只在用户真的走到该页面时才去请求它首屏时间随之下降。拆完业务这一侧再把依赖这一侧拆成一个稳定、可缓存的包。3️⃣ 第三步用 splitChunks 拆出 vendors 包该做什么通过chainWebpack把 node_modules 整体从主包里剥离出来。export default { chainWebpack(memo) { memo.optimization.splitChunks({ cacheGroups: { vendors: { name: vendors, test: /[\\/]node_modules[\\/]/, priority: -10, // ← 新增第三方依赖单独打成 vendors 包 }, }, }); }, }这一手拆完的实际意义业务代码天天变依赖相对稳定。混在一个包里每次发版用户都要重新下载全部拆出 vendors 之后业务变动只会让业务 chunk 的哈希变化vendors 直接命中缓存——这才是 UmiJS splitChunks 配置的价值所在。⚠️ 三个容易踩的坑分块粒度太细切到depPerChunk后每个依赖一个 chunk请求数可能翻几倍HTTP/1.1 或弱网下页面反而变慢。先上granularChunks构建后数一下 dist 里文件数量再决定是否继续细分。拆完忘配缓存和 CDN拆出来的文件名带哈希服务器缓存策略不变浏览器要么全部失效要么命中不了。拆包后同步确认静态资源长缓存 CDN。lazy 误覆盖首屏首屏必须渲染的组件被 lazy 之后首屏要多等两次请求。关键路径组件一律保持静态引入没有例外。✅ 验收怎么知道优化成功了看三个数达到就算达标不必追求极致主包体积从 2.6MB 降到 800KB 以内降幅 50%~70% 区间首屏时间4G 网络下 LCP 或可交互时间下降 30% 以上UmiJS 首屏加载优化就达标了缓存命中率二次访问只变更少数文件vendors 命中缓存即可。按需取用就行先做第一步看指标走到哪再决定要不要继续不用一次到位。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
UmiJS 4 打包优化指南：3 步把 umi.js 主包砍掉 60%
UmiJS 4 打包优化指南3 步把 umi.js 主包砍掉 60%【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi如果你的 UmiJS 4 项目跑完生产构建产出一个 2MB 往上的 umi.js首屏要转 5 秒才出内容那问题就出在 umi.js 文件过大上。按下面三步做完你的项目就能完成一轮完整的 UmiJS 代码分割粒度化分块、大组件懒加载、vendors 分包通常主包能直接砍掉一半。 快速自检主包是不是已经超标动手前先确认是不是真有这问题两条命令就够ls -lh dist/umi.js npx source-map-explorer dist/umi.js如果ls显示主包超过 1MB就该动手了source-map-explorer 里如果看到 node_modules 或某个业务页面占了一整块说明你的 UmiJS 4 分包策略基本没生效。反过来主包只有几百 KB 的话可以先收藏这篇不急着改。1️⃣ 第一步启用粒度化分块让框架自动分包该做什么在.umirc.ts里加一个codeSplitting配置让框架按路由和依赖粒度去拆不用你手写 webpack 规则。export default { codeSplitting: { jsStrategy: granularChunks, // ← 新增按粒度化策略分包 }, }为什么选这一行granularChunks会把 react、react-dom、react-router 这类框架依赖单独打成 framework 块把体积超 160KB 的依赖逐个拆成 lib 块多个路由共享的模块归到 shared 块。注意它只在生产构建时生效本地npm run dev验证是看不到变化的。改完的效果umi.js 里只剩入口逻辑各路由变成按需加载的 chunk主包一般立掉 30%~40%。如果做到这一步体积还没达预期继续第二步把体积大的业务组件也拆出去。2️⃣ 第二步只给大体量组件上懒加载这一步的关键是只改体积大的组件不要全局 lazy——首屏组件全懒加载页面只会更慢。import { Suspense, lazy } from react; const ReportPanel lazy(() import(./ReportPanel)); // ← 改动静态引入改动态 Suspense fallback{Spin /} ReportPanel / /Suspense判断标准就一条source-map-explorer 里这个组件的块超过 100KB且不在首屏就换成React.lazy。改完效果是这部分体积从主包里彻底消失浏览器只在用户真的走到该页面时才去请求它首屏时间随之下降。拆完业务这一侧再把依赖这一侧拆成一个稳定、可缓存的包。3️⃣ 第三步用 splitChunks 拆出 vendors 包该做什么通过chainWebpack把 node_modules 整体从主包里剥离出来。export default { chainWebpack(memo) { memo.optimization.splitChunks({ cacheGroups: { vendors: { name: vendors, test: /[\\/]node_modules[\\/]/, priority: -10, // ← 新增第三方依赖单独打成 vendors 包 }, }, }); }, }这一手拆完的实际意义业务代码天天变依赖相对稳定。混在一个包里每次发版用户都要重新下载全部拆出 vendors 之后业务变动只会让业务 chunk 的哈希变化vendors 直接命中缓存——这才是 UmiJS splitChunks 配置的价值所在。⚠️ 三个容易踩的坑分块粒度太细切到depPerChunk后每个依赖一个 chunk请求数可能翻几倍HTTP/1.1 或弱网下页面反而变慢。先上granularChunks构建后数一下 dist 里文件数量再决定是否继续细分。拆完忘配缓存和 CDN拆出来的文件名带哈希服务器缓存策略不变浏览器要么全部失效要么命中不了。拆包后同步确认静态资源长缓存 CDN。lazy 误覆盖首屏首屏必须渲染的组件被 lazy 之后首屏要多等两次请求。关键路径组件一律保持静态引入没有例外。✅ 验收怎么知道优化成功了看三个数达到就算达标不必追求极致主包体积从 2.6MB 降到 800KB 以内降幅 50%~70% 区间首屏时间4G 网络下 LCP 或可交互时间下降 30% 以上UmiJS 首屏加载优化就达标了缓存命中率二次访问只变更少数文件vendors 命中缓存即可。按需取用就行先做第一步看指标走到哪再决定要不要继续不用一次到位。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
