react如何加快编译

优化 Webpack 配置

启用 Webpack 的 cache 选项，利用持久化缓存减少重复构建时间。配置 babel-loader 时添加 cacheDirectory: true。使用 thread-loader 或 HappyPack 并行处理任务。

// webpack.config.js
module.exports = {
  cache: {
    type: 'filesystem',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: { cacheDirectory: true },
          },
          'thread-loader', // 并行处理
        ],
      },
    ],
  },
};

减少 Babel 转译范围

通过 .babelrc 或 babel.config.js 精确配置 presets 和 plugins，避免转译 node_modules 中的代码。使用 @babel/preset-env 的 targets 选项指定兼容环境。

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: 'defaults' }],
    '@babel/preset-react',
  ],
  ignore: ['node_modules'],
};

启用 SWC 或 esbuild 替代 Babel

SWC 或 esbuild 的编译速度比 Babel 快数十倍。在 Webpack 中通过 swc-loader 或 esbuild-loader 替换 babel-loader。

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

代码分割与动态导入

使用 React.lazy 和 Suspense 实现动态导入，减少初始编译体积。结合 Webpack 的 splitChunks 拆分公共依赖。

// 组件动态导入
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

启用生产模式优化

开发时确保 NODE_ENV=production，触发 React 的生产模式优化（如移除 PropTypes 检查）。在 Webpack 中配置 TerserPlugin 压缩代码。

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin()],
  },
};

监控与分析工具

使用 speed-measure-webpack-plugin 测量各插件耗时，通过 webpack-bundle-analyzer 分析包体积，针对性优化。

// webpack.config.js
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap({
  // 原有配置
});