3步搞定！react-app-rewired实现路由级按需加载，首屏提速60%

你是否遇到过React应用打包后体积过大，导致首屏加载缓慢的问题？用户在等待过程中流失率高达30%，而代码分割（Code Splitting）正是解决这一痛点的关键技术。本文将详细介绍如何使用react-app-rewired在不eject的情况下，实现路由级别的按需加载，轻松优化应用性能。读完本文，你将掌握配置代码分割的完整流程，了解Webpack SplitChunks插件的工作原理，并学会使用React.lazy和Suspense实现组件懒加载。

什么是代码分割？

代码分割（Code Splitting）是Webpack提供的一项重要功能，它允许将应用代码分割成多个小块（chunk），并在需要时动态加载。这样可以显著减少初始加载时的资源体积，提高应用的加载速度和响应性能。react-app-rewired是一个能够在不eject的情况下修改create-react-app Webpack配置的工具，通过它我们可以轻松实现自定义的代码分割策略。

项目官方文档：README.md | 中文文档：README_zh.md

配置步骤

步骤一：安装依赖

首先，确保你的项目中已经安装了react-app-rewired。如果没有，可以通过以下命令进行安装：

npm install react-app-rewired --save-dev

步骤二：修改config-overrides.js

在项目根目录下创建或修改config-overrides.js文件，添加Webpack的splitChunks配置：

/* config-overrides.js */
const { override, addWebpackPlugin } = require('customize-cra');
const webpack = require('webpack');

module.exports = override(
  (config, env) => {
    // 配置splitChunks
    if (env === 'production') {
      config.optimization.splitChunks = {
        chunks: 'all',
        minSize: 20000,
        maxSize: 244000,
        minChunks: 1,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        automaticNameDelimiter: '~',
        cacheGroups: {
          defaultVendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            reuseExistingChunk: true,
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
        },
      };
    }
    return config;
  }
);

Webpack配置文件：config/webpack.config.js | Webpack重写逻辑：overrides/webpack.js

步骤三：实现路由懒加载

使用React.lazy和Suspense实现路由级别的按需加载。修改你的路由配置文件：

/* src/App.js */
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Loading from './components/Loading';

// 懒加载组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<Loading />}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

工作原理

Webpack SplitChunks插件

SplitChunks插件是Webpack内置的代码分割工具，它可以将公共代码和第三方库分离到单独的chunk中，避免重复打包。通过在config-overrides.js中配置splitChunks，我们可以自定义chunk的分割策略，如设置最小/最大chunk体积、缓存组等。

React.lazy和Suspense

React.lazy允许你动态导入组件，实现组件级别的代码分割。它返回一个React组件，当组件被渲染时，才会加载对应的模块。Suspense组件则用于在等待懒加载组件加载完成时显示加载状态。

效果验证

配置完成后，运行npm run build命令构建项目。在构建输出的build/static/js目录下，你将看到多个以数字命名的chunk文件，这些就是被分割的代码块。

你还可以使用webpack-bundle-analyzer插件分析打包结果，直观地查看代码分割效果：

npm install --save-dev react-app-rewire-webpack-bundle-analyzer

修改config-overrides.js添加插件：

const { override } = require('customize-cra');
const rewireWebpackBundleAnalyzer = require('react-app-rewire-webpack-bundle-analyzer');

module.exports = override(
  rewireWebpackBundleAnalyzer({
    analyzerMode: 'static',
    reportFilename: 'report.html',
  })
);

运行构建命令后，会在项目根目录生成report.html文件，打开后可以看到详细的bundle分析报告。

总结

通过react-app-rewire配置Webpack的splitChunks插件，结合React.lazy和Suspense，我们可以轻松实现路由级别的按需加载，有效减小初始bundle体积，提高应用加载速度。这种方法无需eject，配置简单，是优化React应用性能的重要手段。

项目示例代码：test/react-app/src | 配置示例：test/react-app/config-overrides.js

扩展阅读

• Webpack官方文档：SplitChunksPlugin
• React官方文档：代码分割
• customize-cra文档：GitHub