Nest.js 实战 (十一)：配置热重载 HMR 给服务提提速

前言

Nest.js 服务对应用程序的引导过程影响最大的是 TypeScript 编译。每次当我们修改文件时，应用程序都会重新编译整个项目，当应用程序比较庞大时，项目编译会越来越慢，会有很明显的效率低下问题。

那这个问题该怎么解决呢？使用 webpack HMR（Hot-Module Replacement） 能很大程度上降低应用实例化所用的时间。

具体教程

1. 安装所需的依赖包

   powershell 代码:

   pnpm add webpack-node-externals run-script-webpack-plugin webpack -D

2. 根目录下新增 webpack 配置文件 webpack-hmr.config.js

   js 代码:

   const nodeExternals = require('webpack-node-externals');
   const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
   
   module.exports = function (options, webpack) {
     return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename }),
    ],
     };
   };

3. 为了启用 HMR，打开应用程序入口文件（ main.ts ）并添加一些与 webpack 相关的说明

   ts 代码:

   declare const module: any;
   
   async function bootstrap() {
     const app = await NestFactory.create(AppModule);
     await app.listen(3000);
   
     if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
     }
   }
   bootstrap();

4. 修改 package.json 脚本命令

   json 代码:

   "start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"

总结

如果您想要更高级的配置，比如自定义 webpack 配置来更好地控制HMR的行为，您可以在 webpack-hmr.config.js 文件中进行调整。这个文件位于项目的根目录下，并且包含了一些默认的 webpack 配置选项。您可以在其中添加或修改 HMR 相关的配置。