[Webpack] Esbuild-Loader + React Refresh 적용기(2023.08.31 기준 최신화)

적용 이유

프로젝트에 CI-CD가 구축되어 있어 빌드 시간 때문에 스트레스를 받는 일은 없었다. 하지만 코드를 수정했을 때 devServer를 통해 리빌드 되는 시간이 3~6초 정도 소요됐고 새로고침까지 일어나 state 값까지 날아가니 생산성이 많이 떨어진다는 생각이 들었고 이를 개선해야겠다고 마음을 먹었다. 그래서 로더를 변경하는 걸로 결정하였고 기존의 babel-loader, ts-loader에서 esbuild-loader로 변경을 진행하였다.

Esbuild-Loader

적용법

적용법은 매우 간단하다. 공식 문서에 적힌 대로 따라 하기만 하면 된다.

esbuild-loader를 설치 후 webpack.config.js를 열고 아래와 같이 수정하면 된다.

  module.exports = {
      module: {
          rules: [
-             // Transpile JavaScript
-             {
-                 test: /\.js$/,
-                 use: 'babel-loader'
-             },
-
-             // Compile TypeScript
-             {
-                 test: /\.tsx?$/,
-                 use: 'ts-loader'
-             },
+             // Use esbuild to compile JavaScript & TypeScript
+             {
+                 // Match `.js`, `.jsx`, `.ts` or `.tsx` files
+                 test: /\.[jt]sx?$/,
+                 loader: 'esbuild-loader',
+                 options: {
+                     // JavaScript version to compile to
+                     target: 'es2015'
+                 }
+             },
              // Other rules...
          ],
      },
  }

기존에 사용하던 babel-loader, ts-loader를 지우고 esbuild-loader를 추가해 주면 끝이다.

자바스크립트 압축, CSS 압축, CSS in JS 압축 기능도 지원하고 적용 방법도 쉬우니 적용하고 싶다면 공식 문서를 참고하도록 하자.

결과

• 로컬 빌드 : 50초대 => 10초대
• CI-CD 빌드 : 3분대 => 1분대
• 리빌드 시간 : 3초대~ 6초대 => 1초대 ~ 3초대

성능이 250% 정도 개선이 되었다. 하지만 단점으로는 타입 체크를 지원하지 않는다. IDE의 도움을 받거나 타입 체크 플러그인을 적용해야 하고 나는 fork-ts-checker-webpack-plugin을 적용 하였다.

적용하면서 겪었던 문제

공식 문서에 있는 설명을 보고 esbuild-loader를 적용했는데 에러가 발생하였다. 적용할 프로젝트는 TypeScript & TSX였는데 index 확장자가 tsx가 아니라 js였어서 발생한 문제였고 확장자를 tsx로 변경해 주니 해결되었다.

React Refresh

적용법

공식 문서를 보고 플러그인 설치 후 개발 모드일 때만 해당 플러그인이 동작하도록 하고 devServer에서 hot 옵션을 켜주면 끝이다.

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',

  plugins: [
    isDevelopment &&
      new ReactRefreshWebpackPlugin(),
  ].filter(Boolean),

  devServer: {
    hot: true,
  },
};

적용하면서 겪었던 문제

React Refresh를 적용하니 콘솔에만 찍히던 에러들이 브라우저 창에 overlay(?)로 뜨기 시작했다. 처음에는 esbuild-loader랑 호환성 문제 때문인가 싶어 babel-loader 설치 후 공식 문서에 나와있는 대로 적용을 하였는데도 문제가 해결되지 않았다. 깃허브 리포지토리 이슈 쪽도 찾아보고 구글링도 해봤는데 도무지 해결이 되지 않았다. 아무 생각 없이 이슈 쪽에 error를 검색했는데 브라우저 창에 에러가 뜬다는 글을 찾았고 확인해 보니 에러 overaly 옵션이 있고 default가 true이니 false로 바꾸면 해결이 된다는 답변이 있었고 코드를 수정해 보니 문제가 해결되었다. 그 이후 공식 문서를 한번 훑어봤는데 맨 아래 overlay 관련 설명이 쓰여있었다.... 공식 문서를 좀 꼼꼼히 읽는 습관을 가져야겠다....

new ReactRefreshWebpackPlugin({
  overlay: false,
});

마무리

Esbuild-Loader, React Refresh를 따로 적용한 글은 많아도 같이 적용한 글은 없는 거 같아 조금이라도 도움이 되고자 글을 적어보았다. 글 솜씨가 없는 점 양해 부탁하고 틀린 점이 있을 수 있으므로 참고만 하도록 하자.

적용한 Repositore 보러 가기