react如何编译加速

优化 Webpack 配置

启用 cache-loader 或 hard-source-webpack-plugin 缓存编译结果，减少重复编译时间。配置 babel-loader 时排除 node_modules，缩小编译范围。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['cache-loader', 'babel-loader']
      }
    ]
  },
  plugins: [new HardSourceWebpackPlugin()]
};

使用 SWC 替代 Babel

SWC（Speedy Web Compiler）是基于 Rust 的 JavaScript 编译器，编译速度比 Babel 快 10-20 倍。通过 @swc/core 和 swc-loader 替换原有工具链。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
          options: { jsc: { parser: { syntax: 'ecmascript', jsx: true } } }
        }
      }
    ]
  }
};

启用多线程编译

使用 thread-loader 或 HappyPack 并行处理任务，充分利用多核 CPU。需注意线程启动开销，适合大型项目。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: ['thread-loader', 'babel-loader']
      }
    ]
  }
};

减少依赖体积

通过 webpack-bundle-analyzer 分析打包结果，移除未使用的库或按需加载组件（如 lodash-es 替代 lodash）。动态导入（Dynamic Import）拆分代码。

const Component = React.lazy(() => import('./Component'));

升级工具链版本

确保 Node.js 版本 ≥ 16，Webpack ≥ 5，React ≥ 18。新版工具链在性能优化（如持久化缓存、Tree Shaking）上有显著改进。

配置环境变量

开发模式下关闭不必要的检查（如 ESLint、TypeScript 类型校验），生产模式启用 TerserPlugin 并行压缩。

// webpack.config.js
module.exports = {
  optimization: {
    minimizer: [new TerserPlugin({ parallel: true })]
  }
};

使用 Vite 替代 Webpack

Vite 基于原生 ES Module 和 Rollup，启动时间极快。适用于新项目或可迁移的小型项目。

npm create vite@latest my-react-app --template react