前言
Nest.js 服务对应用程序的引导过程影响最大的是 TypeScript
编译。每次当我们修改文件时,应用程序都会重新编译整个项目,当应用程序比较庞大时,项目编译会越来越慢,会有很明显的效率低下问题。
那这个问题该怎么解决呢?使用 webpack HMR(Hot-Module Replacement)
能很大程度上降低应用实例化所用的时间。
具体教程
- 安装所需的依赖包
powershell
pnpm add webpack-node-externals run-script-webpack-plugin webpack -D
- 根目录下新增 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 }),
],
};
};
- 为了启用
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();
- 修改
package.json
脚本命令
json
"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"
总结
如果您想要更高级的配置,比如自定义 webpack 配置来更好地控制HMR的行为,您可以在 webpack-hmr.config.js
文件中进行调整。这个文件位于项目的根目录下,并且包含了一些默认的 webpack 配置选项。您可以在其中添加或修改 HMR
相关的配置。