Docker环境下NestJS使用Webpack HMR热更新慢于nest-cli构建问题

问题根因与修复方案 #

1. 核心性能瓶颈：MacOS Docker挂载IO延迟

MacOS上Docker默认使用osxfs/gRPC FUSE实现宿主机和容器的文件同步，读写延迟是原生系统的数倍，文件数量越多性能下降越明显，现有配置中存在两处明显的挂载冗余：

• 直接挂载宿主机node_modules到容器：MacOS编译的Node二进制包和Alpine容器不兼容，且挂载整个node_modules会带来极高的IO开销
• 挂载dist目录：编译产物频繁同步会额外占用IO资源

修复方式：
修改docker-compose.yml的volumes配置：

volumes:
  # 保留必要的配置文件挂载
  - "../webpack/webpack-hmr-debug.config.js:/home/node/webpack-hmr-debug.config.js"
  - "../tsconfig.build.json:/home/node/tsconfig.build.json"
  - "../.run-if-changedrc:/home/node/.run-if-changedrc"
  - "../nest-cli.json:/home/node/nest-cli.json"
  - "../tsconfig.json:/home/node/tsconfig.json"
  - "../package.json:/home/node/package.json"
  - "../yarn.lock:/home/node/yarn.lock"
  - "../.husky/:/home/node/.husky/"
  - "../.git/:/home/node/.git/"
  # src挂载添加cached模式，提升Mac下读性能
  - "../src/:/home/node/src/:cached"
  # 用匿名卷托管node_modules和dist，避免跨系统同步开销
  - node_modules:/home/node/node_modules
  - dist:/home/node/dist

# 顶层新增匿名卷声明
volumes:
  node_modules:
  dist:

2. Webpack5 缓存配置缺失

你使用的Webpack5内置了文件系统缓存能力，未开启的情况下每次重建都会全量处理所有模块，导致无意义的性能浪费。
修复方式：
在webpack-hmr.config.js的导出配置中新增缓存规则：

module.exports = function (options, webpack) {
  return {
    ...options,
    // 新增缓存配置
    cache: {
      type: 'filesystem',
      buildDependencies: {
        config: [__filename],
      },
    },
    entry: ['webpack/hot/poll?1000', options.entry], // 轮询间隔从100ms调为1000ms，减少扫描IO
    devtool: 'eval-cheap-module-source-map', // 替换inline-source-map，开发环境构建速度更快
    // 其余原有配置保持不变
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?1000'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin(
        {
          name: options.output.filename,
          nodeArgs: ['--inspect=0.0.0.0:9229']
        }
      ),
    ]
  };
};

3. NestJS HMR接受逻辑缺失

如果未在入口文件中添加HMR更新接受逻辑，Webpack检测到无法做模块级替换时，会自动触发全量应用重启，表现为全量重建。
修复方式：
在src/main.ts中添加热更接受代码：

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);

  // 新增HMR逻辑
  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();

以上配置调整完成后，HMR即可实现增量编译，性能会远超nest start --watch模式。

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