React 배포 속도 향상

Webpack 접근

배포 속도 확인을 위해서는 Webpack 내부에 Speed Measure plugin을 적용해야 했다.

지금 개발하고 있는 프로젝트의 경우, CRA 기반 프로젝트였기 때문에 Webpack 내부 접근에 대해 선택지가 여러개 존재했다.
1. Eject
2. CRA를 Vite로 Migration
3. CRA의 Webpack 설정 수정

1. Eject

Eject는 프로젝트 환경 설정이 자유롭다는 이점이 있으나, CRA의 장점을 포기하게 되므로 보류하고 싶었다.
한 번 Eject를 하면 돌릴 수 없으니 주의해야 한다!!

CRA의 장점
1. configuration 관리 자동화
2. 다른 패키지들과의 의존성 관리 자동화
3. React App 버전과 연계된 구성요소 버전 관리 자동화
4. 설정 파일 관리 자동화

2. CRA를 Vite로 Migration

아직 개발이 완료되지 않은 상태였기 때문에 부담이 됐다.
여러가지 의존성 문제, 플러그인 버전 문제를 해결해야 할 수도 있는...
2차 문제 발생 가능성 때문에 보류하게 되었다.

추후 개발 완료 시 Vite로 Migration후, 빌드 속도를 비교하고자 한다.

3. CRA 프로젝트의 Webpack 설정 수정

craco (Create-React-App Configuration Override) 라이브러리를 사용하여 Eject 없이도 Webpack 설정을 바꿀 수 있다.

3-1) 설치를 위해 아래 명령어를 실행

npm install @craco/craco

3-2) craco.config.js 파일 추가

/* craco.config.js */

const smp = new SpeedMeasurePlugin();

module.exports = {
  webpack: smp.wrap({
    configure,
  }),
};

3-3) package.json 파일 수정

"scripts": {
    "build": "craco --openssl-legacy-provider build",
    "build:openvidu-react": "npm install --prefix ../library/ && node library-copy.js && cd ../library && npm run create-library",
    "eject": "react-scripts eject",
    "start": "react-scripts --openssl-legacy-provider start",
    "test": "react-scripts test --env=jsdom"
  },

배포 속도 확인

1.SMP(Speed Measure Plugin) 설치

Webpack에 적용된 plugin과 loader의 속도를 측정해주는 plugin

1-1) 설치를 위해 아래 명령어를 실행

npm install speed-measure-webpack-plugin

1-2) craco 설정 파일에 SMP 추가

/* craco.config.js */

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasurePlugin();

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      return smp.wrap(webpackConfig);
    },
  },
};

이전에 추가했던 내용과 동일하다.

1-3) 빌드 후, 속도 확인

npm run build

배포 속도 개선

WebPack 보다 빠른 번들러 사용

esbuild ➡ 100배 빠름
GO와 JS/TS로 개발

ESBuild + WebPack 빌드 속도 향상

esbuild 적용을 위한 설치

npm install craco-esbuild

craco.config.js 수정하기

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const CracoEsbuildPlugin = require('craco-esbuild');
const smp = new SpeedMeasurePlugin();

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      return smp.wrap(webpackConfig);
    },
  },
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
      options: {
        // includePaths: ['/external/dir/with/components'], // Optional. If you want to include components which are not in src folder
        esbuildLoaderOptions: {
          // Optional. Defaults to auto-detect loader.
          loader: 'tsx', // typeScript인 경우 tsx로 설정
          target: 'es2015',
        },
        esbuildMinimizerOptions: {
          // Optional. Defaults to:
          target: 'es2015',
          css: true, // if true, OptimizeCssAssetsWebpackPlugin will also be replaced by esbuild.
        },
        skipEsbuildJest: false, // Optional. Set to true if you want to use babel for jest tests,
        esbuildJestOptions: {
          loaders: {
            '.ts': 'ts',
            '.tsx': 'tsx',
          },
        },
      },
    },
  ],
};

빌드 후, 속도 확인

눈에 띄는 변화

TerserPlugin (5.28 secs) → ESLinkWebpackPlugin (0.526 secs)
babel-loader (2.99 secs) → esbuild-loader (1.049 secs)

10.83 sec ➡ 6.38 sec 으로 약 2/5 축소한 것을 볼 수 있다.