使用create-react-app构建时能否避免打包React库，改用CDN加载？

Great question! You totally can load React and ReactDOM via CDN instead of bundling them into your create-react-app build—no need to eject or switch to plain Webpack. I’ve done this multiple times to cut down bundle sizes while keeping CRA’s streamlined workflow. Here’s exactly how to set it up:

Step 1: Add CDN Links to Your Public HTML #

First, open public/index.html and add the React and ReactDOM CDN scripts to the <head> section. Make sure to use the production-ready minified versions and include the crossorigin attribute (this is required for React’s error boundary and other features to work correctly with cross-origin resources):

<head>
  <!-- ... other meta tags, title, etc. -->
  <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>
</head>

You can replace the URLs with your preferred CDN (like jsDelivr) if you want—just ensure you’re pulling the correct version that matches your project’s React dependency.

Step 2: Configure CRA to Exclude React from Bundling #

By default, CRA will bundle React and ReactDOM into your final build. To override this without ejecting, we’ll use craco (Create React App Configuration Override), a tool that lets you tweak CRA’s Webpack config safely.

1. Install craco as a dev dependency:

npm install @craco/craco --save-dev
# or with yarn
yarn add @craco/craco --dev

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

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

3. Create a craco.config.js file in your project root, and add the Webpack externals configuration. This tells Webpack that React and ReactDOM are provided externally (via the CDN’s global variables React and ReactDOM):

module.exports = {
  webpack: {
    configure: {
      externals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      }
    }
  }
};

Optional: Only Apply to Production Builds #

If you want to keep using local React for development (to preserve hot reloading and other dev tools), you can adjust the config to only exclude React from production builds:

module.exports = {
  webpack: {
    configure: (webpackConfig, { env }) => {
      if (env === 'production') {
        webpackConfig.externals = {
          react: 'React',
          'react-dom': 'ReactDOM'
        };
      }
      return webpackConfig;
    }
  }
};

Verify It Works #

Run npm run build and check the output in the build folder. You’ll notice your main bundle file is significantly smaller (since it no longer includes React/ReactDOM). You can also inspect the build’s HTML to confirm the CDN scripts are present, and test your app to ensure everything runs as expected—your import React from 'react' statements will still work, as Webpack maps them to the global variables from the CDN.

That’s it! You get to keep all the benefits of CRA while offloading React to a CDN, which can improve load times for repeat visitors (who may already have React cached from other sites).

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