ASP.NET项目中如何预编译React JSX文件？

你遇到的问题确实是实时编译导致的——BabelHandlerFactory在首次请求时会逐个编译JSX文件，还要解析依赖链，自然耗时很长。下面给你几个可行的预编译方案，按推荐程度排序：

1. 用Webpack+Babel提前预编译所有JSX文件（最推荐） #

这是现代React项目的标准做法，完全绕过实时编译的问题：

• 先在项目里初始化npm，安装必要的工具：

  npm init -y
  npm install webpack webpack-cli babel-loader @babel/core @babel/preset-react --save-dev
  

• 项目根目录创建.babelrc配置文件：

  {
    "presets": ["@babel/preset-react"]
  }
  

• 创建webpack.config.js，配置入口、输出和loader：

  module.exports = {
    entry: './src/your-main-jsx-file.jsx',
    output: {
      filename: 'bundle.js',
      path: __dirname + '/dist'
    },
    module: {
      rules: [
        {
          test: /\.jsx$/,
          exclude: /node_modules/,
          use: 'babel-loader'
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    }
  };
  

• 运行编译命令（生产环境记得加--mode production做压缩优化）：

  webpack --mode production
  

• 最后在BundleConfig.cs里替换原来的BabelBundle，直接引用编译好的bundle.js：

  bundles.Add(new ScriptBundle("~/bundles/react").Include(
    "~/dist/bundle.js"
  ));
  

这样部署的时候直接用预编译好的文件，首次加载速度会大幅提升。

2. 开启BabelBundle的服务器端缓存 #

如果你暂时不想切换构建工具，可以尝试开启官方提供的缓存机制，让编译后的文件存在服务器本地，后续请求直接复用：

• 在Web.config里添加以下配置：

  <configuration>
    <appSettings>
      <!-- 指定缓存文件存储目录 -->
      <add key="React:CachePath" value="~/App_Data/ReactCache" />
      <!-- 启用服务器端缓存 -->
      <add key="React:EnableServerCache" value="true" />
      <!-- 可选：开启文件变化监测，修改JSX后自动重新编译 -->
      <add key="React:WatchFiles" value="true" />
    </appSettings>
  </configuration>
  

注意：首次访问还是会有编译耗时，但后续所有用户访问都会直接用缓存好的文件，能缓解重复加载的问题。

3. 使用Babel CLI批量预编译JSX #

如果不想用Webpack，也可以直接用Babel CLI手动批量编译JSX：

• 安装Babel CLI和React预设：

  npm install @babel/cli @babel/core @babel/preset-react --save-dev
  

• 配置.babelrc和上面一样，然后运行编译命令：

  npx babel ./path-to-your-jsx-files --out-dir ./path-to-compiled-js --extensions ".jsx"
  

• 之后在BundleConfig里引用编译好的JS文件即可，和第一种方案的最后一步一样。

额外提醒 #

• 开发环境下，如果你用Webpack，可以开启webpack --watch或者webpack-dev-server，修改JSX后自动重新编译，不用手动执行命令。
• 生产环境一定要用--mode production，会自动做代码压缩、tree-shaking等优化，进一步提升加载速度。

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