React大型应用JS bundle加载过慢 性能优化方案咨询

优先修复CDN缓存逻辑，零/低代码改动拿到核心收益 #

之前你们用CDN能把加载时长压到1秒，说明CDN加速本身是完全能达到性能目标的，出现测试环境拉取旧资源的问题，本质是没做静态资源版本化，不是CDN方案本身的缺陷，按下面的配置改完就能彻底解决缓存问题，同时保留CDN的加速效果：

• 打包配置给所有静态JS/CSS资源加8位内容哈希后缀，生产环境输出文件名格式为[name].[contenthash:8].js，只要文件内容有变更，哈希值就会变化，资源URL随之更新，CDN会自动回源拉取新版本，旧版本缓存不会影响新版本发布，这部分资源可以直接配置1年的长效缓存，命中率能到90%以上。
• 测试环境资源路径加Git提交哈希前缀，比如输出路径为/test/{当前commit短哈希}/[name].js，每次开发者提交代码触发构建，commit哈希变化就会生成全新的资源路径，完全不会命中CDN上的旧缓存，不需要手动清缓存就能保证测试环境永远拉到最新代码。
• CDN控制台开启自动压缩，同时支持gzip和brotli两种压缩格式，3.5MB的原始JS包经过brotli压缩后体积仅为700-900KB，相比原体积减少75%以上，这步配置完哪怕不做任何代码拆分，资源加载时长基本就能落到1.3-1.9秒区间，已经能达到你们的目标要求。

代码拆分落地步骤，进一步压缩首屏体积、留足性能冗余 #

你们之前调研的代码拆分方向是对的，按下面的优先级落地，改造成本低、见效快：

• 第一优先级做路由级拆分，改造成本最低、收益最高：所有非首屏的路由页面组件，统一用React.lazy+Suspense做动态加载，首屏只加载当前访问路由对应的代码，不要把所有路由页面都打进主包。参考实现：

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// 替换原有的静态import
const HomePage = lazy(() => import('./pages/Home'));
const DashboardPage = lazy(() => import('./pages/Dashboard'));
const UserCenterPage = lazy(() => import('./pages/UserCenter'));

function App() {
  return (
    <Suspense fallback={<div className="global-loading">页面加载中</div>}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/dashboard" element={<DashboardPage />} />
        <Route path="/user" element={<UserCenterPage />} />
      </Routes>
    </Suspense>
  )
}

做完这步，主包体积一般能直接砍掉60%以上，压缩后主包体积通常在300-500KB区间。

• 第二优先级做大体积非首屏组件的懒加载：富文本编辑器、ECharts图表、大弹窗、文件预览这类不是首屏首次渲染必须的组件/依赖，全部改成触发对应交互时再动态加载，不要提前打进首屏主包。
• 单独拆分第三方依赖包：把react、react-dom、组件库这类不频繁升级的公共依赖，单独拆成vendor chunk，配置长效缓存，用户二次访问时不需要重新拉取这部分资源。

配套优化点（低投入高收益） #

• 开启Tree Shaking：打包配置开启生产环境优化，正确配置package.json中的sideEffects字段，剔除代码中未被使用的死代码，注意不要误把全局样式、polyfill这类有副作用的文件标记为无副作用导致被误删。
• 清理冗余依赖：通过打包分析工具排查产物，替换大体积依赖：比如用lodash-es做按需引入代替全量lodash，用dayjs代替moment，剔除重复引入的多版本依赖，单这一项通常能再砍掉100-300KB的包体积。
• 按需引入polyfill：不要全量引入core-js，根据业务需要兼容的浏览器范围做按需加载，非首屏需要的polyfill不要打进主包。
• 关键资源预加载：给首屏核心JS资源加rel="preload"提示浏览器优先加载，对用户高概率访问的下一跳路由资源，可以在浏览器空闲时做预获取，进一步降低跳转时的加载感知。

实测效果参考：同体量React应用按上述方案落地后，首屏JS加载时长稳定在0.8-1.5秒区间，完全满足1-2秒的目标要求，同时不会出现测试环境缓存旧代码的问题，适配现有研发流程。

内容的提问来源于stack exchange，提问作者nonamehere