번들링 속도 개선하기(Feat. React, Typescript, Webpack)

www.npmjs.com/package/speed-measure-webpack-plugin

speed-measure-webpack-plugin

 

일단, 체크

speed-measure-webpack-plugin

 

 

 

 

 

 

1.  loader 줄이기

2. transpileOnly, experimentalWatchApi

- ts-loader는 기본 옵션이 TS를 JS로 변환하는 transpile 작업과 type check 작업을 같은 스레드에서 동시에 실행.

- type check는 개발자에게 편의 제공을 위한 기능이지 type이 브라우저에게 넘어갈 결과물에 까지는 영향을 주지 않기 때문에, type check 작업은 분리되어도 상관없음

- ts-loader에는 transpile 작업만을 진행하는 옵션으로 transpile 작업을 진행/ type check는 fork-ts-checker-webpack-plugin 플러그인을 통해서 체크.

- xperimentalWatchApi 옵션을 사용하면 ts-loader가 TypeScript의 내부 watch mode API를 사용하여 재컴파일해야하는 파일 수를 크게 줄임

{
    test: /\.tsx?$/,
    loader: [
        {
            loader: 'ts-loader',
            options: {
                transpileOnly: true,
                experimentalWatchApi: true,
            },
        },
    ],
    exclude: /node_modules/,
},

3. webpack optimization

// ...
output: {
    pathinfo: false,
},
optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false,
},
// ...

- pathinfo 설정의 경우엔 GC를 최소화 할수 있음

- optimization 옵션은 production시에는 필요. But, 개발 버전에서는 크게 유용하지 않은것들에 대한 기능들을 사용하지 않는것

4. Cache

- 이미 컴파일된 소스코드를 최대한 캐시하여 처리하여 빌드속도 높이기

- 종류 cache-loader, hard-source-webpack-plugin

// ...
plugins: [
    new ForkTsCheckerPlugin(),
    new HardSourcePlugin(),
],
// ...

 

 

 

 

 

References:

www.gitmemory.com/issue/TypeStrong/ts-loader/1124/690907470

b.luavis.kr/web/speed-up-webpack