大型Django项目中Rspack构建耗时过长的排查求助

针对你的大型Django项目（jQuery+React+SCSS），Rspack数分钟的构建耗时确实偏长，结合你给出的配置，以下是具体的优化方向：

1. 移除重复入口，减少冗余编译 #

你的rspack.config.js中存在重复的入口配置：

pdf_style: "./style/pdf/pdf_style.js",
static_pdf_style: "./style/pdf/pdf_style.js",

这会导致同一个文件被编译两次，直接浪费一倍的编译时间，建议合并或删除其中一个入口。

2. 统一外部依赖与本地vendors的处理逻辑 #

你在externals中声明了jquery: "jQuery"，但又在vendors入口中引入了本地的jquery.min.js，这会导致冲突：

• 如果要通过CDN引入jQuery，保留externals配置，同时删除vendors中的./vendors/js/jquery.min.js，避免重复打包。
• 如果要使用本地jQuery，删除externals配置，让Rspack正常打包。

另外，手动维护vendors入口的方式效率较低，建议交给Rspack的splitChunks自动处理第三方依赖拆分，只保留业务代码作为入口，减少手动配置的冗余。

3. 生产模式下的优化配置 #

确保你的rspack.prod.config.js开启了生产模式的核心优化：

• 明确设置mode: "production"，Rspack会自动启用树摇、代码压缩等默认优化。
• 调整devtool为更轻量的选项，比如source-map（只在生产环境生成完整sourcemap，或者hidden-source-map如果不需要对外暴露），避免开发模式的sourcemap拖慢构建速度。
• 启用CSS压缩，添加css-minimizer-webpack-plugin到优化配置中：

  const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  
  module.exports = {
    optimization: {
      minimizer: [
        `...`, // 保留默认的JS压缩器
        new CssMinimizerPlugin(),
      ],
    },
  };
  

4. 优化Babel编译性能 #

给babel-loader添加缓存，避免重复编译相同文件：

{
  test: /\.[jt]sx?$/,
  exclude: /(node_modules)/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
      cacheDirectory: true, // 启用Babel缓存
      cacheCompression: false, // 关闭缓存压缩，提升读取速度
    },
  },
}

同时，在@babel/preset-env中配置具体的targets，比如只支持现代浏览器，减少不必要的编译转换：

presets: [
  ["@babel/preset-env", {
    targets: {
      browsers: ["last 2 versions", "not dead"]
    }
  }],
  // 其他preset...
]

5. 强化缓存策略 #

确保生产环境下的文件系统缓存配置正确，让Rspack复用之前的编译结果：

cache: {
  type: "filesystem",
  buildDependencies: {
    config: [__filename], // 当配置文件修改时，重新生成缓存
  },
}

6. 优化资源处理规则 #

对于图片资源，使用type: "asset"让Rspack自动判断是否内联文件，减少小文件的IO操作：

{
  test: /\.(png|svg|jpg|jpeg|gif)$/,
  type: "asset", // 自动选择inline或输出文件
  exclude: /node_modules/,
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024, // 小于8KB的文件内联为base64
    },
  },
}

7. 检查watchFiles配置（开发模式） #

在rspack.local.config的watchFiles中，当前的路径可能存在冗余，比如js/**/*.scss如果不存在可以删除，避免不必要的文件监听。另外，确保只监听业务相关文件，减少Rspack的监听开销。

构建耗时是否正常？ #

对于大型项目，Rspack的生产构建通常应该控制在1-2分钟以内（甚至更快，取决于代码量），数分钟的耗时说明配置存在可优化的空间，按照上述步骤调整后应该能显著提升构建速度。

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