Marco

    EsBuild-loader를 통해 웹팩 프로덕션 빌드 타임 절감

    September 06, 2022

    EsBuild-loader 를 통한 빌드 타임 절감

    EsBuild 적용을 통해 프로덕션 빌드 타임이 거의 1/4 수준으로 줄었다.

    • before babelloader
    • after esbuild-loader

    BabelLoader(최신 ES 문법 트랜스파일링), TsLoader(타입스크립트 로더), TerserPlugin(JS 압축), CssMinimizerPlugin(CSS 압축)를 삭제하고 기존 기능들을 아래와 같이 EsBuild를 통해 대체하였다.

      module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/i,
        exclude: /node_modules/,
        loader: 'esbuild-loader',
        options: {
          loader: 'tsx',
          target: 'es2020'
        }
      },
    const { ESBuildMinifyPlugin } = require('esbuild-loader');


  optimization: {
    minimize: true,
    minimizer: [
      new ESBuildMinifyPlugin({
        target: 'es2020',
        css: true
      })
    ]
  }

    참고

    Written by@Marco

    GitHub