CRA构建后static/js文件过大，如何拆分或缩减体积提升页面速度

1. 代码分割与按需加载 #

• 使用React的React.lazy和Suspense实现组件级按需加载，将非首屏组件拆分到独立chunk：

  import { Suspense, lazy } from 'react';
  const OtherComponent = lazy(() => import('./OtherComponent'));
  
  function MyComponent() {
    return (
      <Suspense fallback={<div>加载中...</div>}>
        <OtherComponent />
      </Suspense>
    );
  }
  

• 对路由进行分割，结合react-router实现路由级按需加载，让不同路由对应组件生成独立chunk。

2. 分析依赖体积定位问题 #

• 运行npm run build -- --stats生成构建统计文件，安装webpack-bundle-analyzer分析依赖占比：

  npm install webpack-bundle-analyzer --save-dev
  

  在package.json添加脚本：

  "scripts": {
    "analyze": "webpack-bundle-analyzer build/bundle-stats.json"
  }
  

  执行npm run analyze可直观查看各依赖体积占比，针对性替换大体积依赖（比如用lodash-es替代lodash按需导入，用date-fns替代moment.js）。

3. 启用传输层压缩 #

• 在服务器端（Nginx、Apache等）配置Gzip或Brotli压缩，大幅降低传输文件体积；静态托管平台（如Netlify、Vercel）一般默认开启该功能。

4. 优化第三方依赖加载 #

• 将体积大的第三方库（如react、react-dom）通过CDN引入，在public/index.html添加：

  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  

  借助craco或react-app-rewired修改webpack的externals配置，避免将这些库打包进项目：

  "externals": {
    "react": "React",
    "react-dom": "ReactDOM"
  }
  

5. 用CRACO扩展Webpack配置 #

• 无需eject项目，通过craco修改webpack配置实现依赖拆分：
  安装依赖：

  npm install @craco/craco --save-dev
  

  创建craco.config.js：

  module.exports = {
    webpack: {
      configure: (webpackConfig) => {
        webpackConfig.optimization.splitChunks = {
          chunks: 'all',
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendors',
              chunks: 'all',
            },
          },
        };
        return webpackConfig;
      },
    },
  };
  

  修改package.json的启动脚本为craco start、craco build。

6. 关闭生产环境SourceMap #

• 在.env.production文件中添加：

  GENERATE_SOURCEMAP=false
  

  避免生成SourceMap文件，减少构建产物体积同时防止源码暴露。

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