企业官网建设流程全解析

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 之后，首屏要多等两次请求。关键路径组件一律保持静态引入，没有例外。

✅ 验收：怎么知道优化成功了

看三个数，达到就算达标，不必追求极致：

1. 主包体积：从 2.6MB 降到 800KB 以内（降幅 50%~70% 区间）；
2. 首屏时间：4G 网络下 LCP 或可交互时间下降 30% 以上，UmiJS 首屏加载优化就达标了；
3. 缓存命中率：二次访问只变更少数文件，vendors 命中缓存即可。

按需取用就行：先做第一步，看指标走到哪再决定要不要继续，不用一次到位。

【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi