웹팩 빌드 속도 높이기 (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
Author And Source
이 문제에 관하여(웹팩 빌드 속도 높이기 (feat. 타입체크와 트랜스파일링 분리)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@goody/웹팩-빌드-속도-높이기-feat.-타입체크와-트랜스파일링-분리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)