NestJS 프로젝트를 빌드할 때 빌드 시간에 가장 큰 영향을 미치는 것이 바로 TypeScript 컴파일이다.
원래라면 프로젝트에 변경사항을 적용하고 다시 실행시킬때마다 전체적으로 다시 TypeScript 컴파일을 해야한다.
조그마한 변경에도 이 일을 똑같이 반복하게 된다면, 프로젝트의 빌드 시간을 계속 꽤 오랫동안 기다려야 할테고, 개발의 효율성도 떨어질 것이다.
이러한 상황을 해결하기 위해 NestJS에서는 Hot Reload라는 기능을 제공한다.
Hot Reload는 변경 사항을 적용하고 다시 프로젝트를 빌드할 때, 전체적으로 TypeScript 컴파일을 진행하는 것이 아닌 변경된 부분만 컴파일 하도록 함으로써 개발 시간을 단축시켜 준다.(프로젝트가 빌드되기를 기다리는 시간이 많이 줄여주기 때문)
Hot Reload를 사용하기 위해선 다음과 같은 세팅을 해주면 된다.
Nest CLI를 이용한 세팅을 할 것이다.
Installation
npm install --save webpack-node-externals run-script-webpack-plugin webpack
이렇게 필요한 패키지 설치한다.
변경 된 사항만 컴파일 할 수 있게 해주는 게 webpack HMR(Hot-Module Replacement)이다.
webpack은 파일들을 그룹핑 해주는 도구인 번들러 중 하나이며, 여러 개의 파일을 하나로 묶어주어 네트워크 접속의 부담을 줄여 빠른 서비스를 제공하게 하며, 모듈을 사용해 복잡하고 긴 코드를 작성할 때 사용 용도에 따라 파일 단위로 구분해, 다른 파일에서 해당 클래스나 함수가 필요할 때 가져와서 사용할 수 있게 한다.
또한, 외부 라이브러리의 의존성도 쉽게 관리할 수 있다.
이러한 webpack은 모듈 시스템의 구성, 로더 사용, 빠른 컴파일 속도 등의 장점을 가지고 있으며, HMR은 webpack에 속하며, 그 중에서 빠른 컴파일 속도를 담당한다.
Configuration
필요한 패키지를 설치하고, 루트 디렉터리에 webpack-hmr.config.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 관련 코드를 추가해 HMR을 활성화한다.
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 파일에 스크립트를 추가하면, CLI에 npm run start:dev 명령으로 사용할 수 있다.
"start: dev":"nest build --webpack --webpackPath webpack-hmr.config.js --watch"참고
