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

前言

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

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

具体教程

  1. 安装所需的依赖包
powershell 复制代码
pnpm add webpack-node-externals run-script-webpack-plugin webpack -D
  1. 根目录下新增 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 }),
    ],
  };
};
  1. 为了启用 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();
  1. 修改 package.json 脚本命令
json 复制代码
"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"

总结

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

相关推荐
Amd7941 小时前
Nuxt.js 应用中的 webpack:compile 事件钩子
webpack·自定义·编译·nuxt.js·构建·钩子·逻辑
三天不学习6 小时前
前端工程化-node/npm/babel/polyfill/webpack 一文速通
前端·webpack·npm
前端青山7 小时前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
前端与小赵21 小时前
什么是Webpack,有什么特点
前端·webpack·node.js
生椰拿铁You1 天前
03 —— Webpack 自动生成 html 文件
前端·webpack·node.js
Amd7941 天前
Nuxt.js 应用中的 webpack:configResolved事件钩子
webpack·自定义·开发·配置·nuxt.js·构建·钩子
Amd7942 天前
Nuxt.js 应用中的 webpackConfigs 事件钩子
webpack·配置·模块·nuxt.js·插件·输出·钩子
一雨方知深秋2 天前
prop校验,prop和data区别
前端·javascript·webpack·data·prop校验
落日弥漫的橘_3 天前
解决vue 项目报 error in ./node_modules/ml-matrix/matrix.js 问题
vue.js·webpack
几何心凉3 天前
网页抓取API,让数据获取更简单
前端·webpack·node.js