React Loadable如何处理多Bundle中被复用的代码？

Hey there! I get it, it's frustrating when a shared component like Breadcrumbs ends up duplicated across your pageA and pageB bundles. Let's break down why this happens and how to fix it with React Loadable and Create React App's underlying webpack setup.

Why the Duplication Happens #

First off: React Loadable itself is just a tool to wrap asynchronous component loading—it doesn't handle extracting shared code on its own. By default, Create React App's webpack configuration does a great job splitting third-party dependencies into vendor chunks, but it doesn't always automatically pull in custom shared components (like your Breadcrumbs) when they're used across multiple async chunks. That's why you're seeing it in both pageA and pageB bundles.

How to Fix It: Webpack's SplitChunksPlugin #

The solution lies in tweaking webpack's SplitChunksPlugin (which is already built into Create React App) to recognize and extract your shared custom components. Since you can't edit CRA's webpack config directly, we'll use a tool like craco (or react-app-rewired) to override the config.

Step 1: Set Up React Loadable Correctly #

First, make sure you're using React Loadable to async-load your pages properly. For example:

// src/LoadablePageA.js
import Loadable from 'react-loadable';

const LoadablePageA = Loadable({
  loader: () => import('./PageA'),
  loading: () => <div>Loading Page A...</div>,
});

export default LoadablePageA;

Repeat this pattern for LoadablePageB.js with your PageB component. This tells webpack to split each page into its own chunk.

Step 2: Configure SplitChunks with Craco #

1. Install craco if you haven't already:

npm install @craco/craco --save-dev

2. Update your package.json scripts to use craco instead of react-scripts:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

3. Create a craco.config.js file in your project root with this configuration:

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.optimization.splitChunks = {
        chunks: 'all', // Apply to all chunks (async and initial)
        cacheGroups: {
          // Handle shared custom components
          common: {
            name: 'common',
            minChunks: 2, // Extract modules used in at least 2 chunks
            chunks: 'all',
            priority: -10,
            reuseExistingChunk: true, // Reuse existing chunks if possible
            enforce: true,
          },
          // Keep CRA's default vendor chunk setup for third-party libs
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
            priority: -20,
          },
        },
      };
      return webpackConfig;
    },
  },
};

Step 3: Verify the Fix #

Run npm run build and check the build/static/js directory. You'll now see a common.*.js file that includes your Breadcrumbs component. The pageA and pageB chunks will no longer contain duplicate copies of Breadcrumbs.

When a user first visits PageA, the common chunk will load alongside PageA's chunk. If they later navigate to PageB, the browser will reuse the already-loaded common chunk instead of downloading the Breadcrumbs code again.

Key Takeaway #

React Loadable handles the async loading of your components, but the heavy lifting of splitting shared code falls to webpack's SplitChunksPlugin. By configuring this plugin to extract modules used across multiple chunks, you eliminate duplication and optimize your app's load time.

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