웹팩 빌드 속도 높이기 (feat. 타입체크와 트랜스파일링 분리)

❗️ CRA 없이 리액트 + 타입스크립트 프로젝트를 만드는 경우를 염두에 두고 쓴 글입니다.
학습중인 내용이므로 틀린 부분이 있을 수 있습니다.
댓글을 통한 모든 피드백은 환영입니다!

ts-loader VS awesome-typescript-module

타입스크립트 + 리액트 프로젝트를 진행할 땐 타입스크립트를 로드해주는 모듈이 필수적입니다. 이 때 사용되는 모듈로는 ts-loader 또는 awesome-typescript-module 이 두 모듈이 대표적입니다.

두 모듈의 가장 큰 차이점은 프로젝트에서 바벨을 사용하냐, 그렇지 않느냐인데요. 바벨을 사용하는 프로젝트의 경우 awesome-typescript-module (이하 atl) 을 사용하고, 그렇지 않으면 ts-loader 를 사용한다고 합니다.

저는 타입스크립트가 트랜스파일링을 해주므로 굳이 바벨이 필요없다고 생각해 ts-loader를 선택했습니다.

문제는 atl이 바벨 지원 뿐만 아니라, 트랜스파일링과 타입체크 프로세스를 분리함으로써 빌드 속도를 높여주는 기능을 갖고 있다는 점인데요. 다행히 ts-loader 로도 두 프로세스를 분리하는 방법이 존재합니다.

//webpack.config.js

module: {
		rules: [
			{
				test: /\.tsx?$/,
				loader: "ts-loader", 
				exclude: /node_modules/,
				options: {
					transpileOnly: true, //  타입체크 없이 트랜스파일링만. (타입체크는 ForkTsCheckWebpackPlugin 에서)
				},
			},
		],
	},

ts-loader 는 타입체크 없이 트랜스파일만 하도록 옵션을 설정했습니다.

그렇다면 타입체크는 어디서 하나요?

ForkTsCheckerWebpackPlugin 라는 플러그인은 타입 체크를 트랜스파일링과 별도의 프로세스에서 진행함으로써 전체적인 빌드 속도를 빠르게 해 줍니다.

// webpack.config.js

plugins: [new ForkTsCheckerWebpackPlugin()],

컴파일 속도 비교

분리 전 :

분리 후 :

❗️ 프로젝트에 App.tsx 파일 외에 별다른 컴포넌트가 없는 상태에서의 비교입니다.

REFERENCE

ts-loader npm : https://www.npmjs.com/package/ts-loader
awesome-typescript-loader npm : https://www.npmjs.com/package/awesome-typescript-loader