如何通过Webpack将React核心库与自定义脚本分开打包？

当然可以实现这种分离打包的需求！这是前端性能优化里很经典的「第三方依赖拆分」方案，核心目的是利用浏览器缓存——把react、react-dom这类不常变动的核心库单独打包，用户首次加载后，后续访问只要业务代码更新，就不用重复下载这些依赖文件了。下面以最常用的Webpack为例，给你具体的实现方法：

方法一：用Webpack内置的splitChunks配置（Webpack 4+推荐） #

Webpack的splitChunks可以自动识别并拆分第三方依赖，你只需要在webpack.config.js里添加如下配置：

module.exports = {
  // ...其他基础配置（entry、output等）
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          // 精准匹配你要拆分的核心库
          test: /[\\/]node_modules[\\/](react|react-dom|redux|immutable)[\\/]/,
          name: 'bundle-react', // 拆分后的文件名
          chunks: 'all',
          priority: 10 // 确保这些库优先被拆分到这个分组
        }
      }
    }
  }
};

配置完成后，执行构建命令，Webpack就会把指定的核心库单独打包成bundle-react.js，而你的业务代码和自定义脚本会被打包到bundle.js（或你在output里配置的业务代码文件名）。

方法二：用Webpack的DllPlugin（适合大型项目） #

如果你的项目依赖极多，或者想更精准地预打包核心依赖，可以用DllPlugin提前把核心库打包好，后续构建只处理业务代码：

1. 新建一个单独的Webpack配置文件（比如webpack.dll.config.js）：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    react: ['react', 'react-dom', 'redux', 'immutable']
  },
  output: {
    filename: 'bundle-react.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]_library' // 暴露全局变量供业务代码引用
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_library',
      path: path.resolve(__dirname, 'dist', 'react-manifest.json')
    })
  ]
};

2. 在package.json里添加打包命令：

{
  "scripts": {
    "build:dll": "webpack --config webpack.dll.config.js"
  }
}

3. 在主Webpack配置里引入生成的manifest文件：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  // ...其他基础配置
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dist', 'react-manifest.json')
    })
  ]
};

先执行npm run build:dll生成bundle-react.js，之后每次构建业务代码时，Webpack会跳过已打包的核心库，只处理你的业务逻辑，构建速度也会更快。

最后注意事项 #

• 不管用哪种方法，都要记得在HTML文件里按顺序引入两个打包文件：先引入bundle-react.js，再引入业务代码的bundle.js。
• 如果用Vite构建，它默认会把第三方依赖拆分到单独chunk里，你也可以通过build.rollupOptions.output.manualChunks手动配置拆分规则，实现同样的效果。

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