Next.jsのビルドへesbuild-loaderを適応してビルド速度を5%の高速化を実現したためメモしました。

経緯

ビルド時間の高速化をはかりたく試してみたところ改善することが出来たため 導入することにしました。

環境

• Next.js 7.0
• TypeScript 3.0.3
• NodeJS 14.17.1

改善結果

先に改善結果から共有します。

現在のビルド時間

terminal
$ time yarn build 
yarn run v1.22.10
$ NODE_ENV=production next build src
// 中略
✨  Done in 88.85s.
yarn build  92.51s user 3.76s system 107% cpu 1:29.19 total

5回実施した平均値

変更前

5回実施して平均は92.97sでした。

変更後

5回実施して平均は87.63sでした。

約5%のビルド速度の改善効果が得られました。

esbuild-loaderの導入

esbuild-loaderパッケージのインストール

esbuild-loaderパッケージをインストールします。

terminal
$ yarn add -D esbuild-loader

next.config.jsの変更

現状について

Next.jsバージョン7系のプロジェクトでTypeScriptを利用しています。

next.config.js

next.config.jsのwebpackの設定です。

next.config.js
module.exports = withTypescript({
  webpack(config, options) {
    config.plugins.push(new webpack.EnvironmentPlugin(process.env));
    if (options.isServer) {
      config.plugins.push(
        new ForkTsCheckerWebpackPlugin({
          tsconfig: path.resolve("./tsconfig.json"),
          memoryLimit: 1024
        })
      );
    }
    if (process.env.NODE_ENV && process.env.NODE_ENV === "production") {
      config.optimization.minimize = true;
      config.optimization.minimizer = [
        new TerserPlugin({
          terserOptions: {
            compress: { drop_console: true }
          },
          extractComments: "all"
        })
      ];
    }
    return config;
  }
})

変更後

useEsbuildLoaderを追加して読み込んでいます。

next.config.js
function useEsbuildLoader(config, options) {
  const jsLoader = config.module.rules.find(
    rule => rule.test && rule.test.test(".js")
  );

  if (jsLoader) {
    jsLoader.use.loader = "esbuild-loader";
    jsLoader.use.options = options;
  }
}

module.exports = withTypescript({
  webpack(config, options) {
    config.plugins.push(new webpack.EnvironmentPlugin(process.env));

    config.plugins.push(
      new webpack.ProvidePlugin({
        React: "react"
      })
    );

    useEsbuildLoader(config, {
      loader: "tsx",
      target: "es2017"
    });

    if (options.isServer) {
      config.plugins.push(
        new ForkTsCheckerWebpackPlugin({
          tsconfig: path.resolve("./tsconfig.json"),
          memoryLimit: 1024
        })
      );
    }
    if (process.env.NODE_ENV && process.env.NODE_ENV === "production") {
      config.optimization.minimize = true;
      config.optimization.minimizer = [
        new TerserPlugin({
          terserOptions: {
            compress: { drop_console: true }
          },
          extractComments: "all"
        })
      ];
    }
    return config;
  }
})

tsconfig.jsonの追記

tsconfig.jsonへ下記オプションを追加します。

tsconfig.json
  "isolatedModules": true,
  "esModuleInterop": true

その他

未サポート

tsconfigの下記のオプションはサポートされていないようです。

• emitDecoratorMetadata
  • TSの型情報に依存した出力が必要なため
• const enum
  • コンパイル時に普通の enum に変換される

ESBuildMinifyPlugin

TerserPlugin→ESBuildMinifyPluginを試したのですがビルド時に下記のエラーのため
適応できませんでした。

追加したwebpackの設定

next.config.js
  config.optimization.minimize = true;
  config.optimization.minimizer = [new ESBuildMinifyPlugin()];

ビルド実行

ビルド実行時に下記エラー

TypeError: compilation.getAssets is not a function

webpack5系へ変更

webpackのバージョンが古いためエラーが出ているケースがある記事を参考にwebpackを最新にしてみましたが下記エラーが発生しました。

TypeError: Cannot read property 'get' of undefined

引き続きエラーの原因調査し解決したら記事にしようと思います。

エラーを修正してESBuildMinifyPluginへ置き換えられるともう少し早くなりそうです。

参考文献

Github

esbuild-loader-examples/examples/next at master · privatenumber/esbuild-loader-examples

github.com

esbuild 公式

esbuild - An extremely fast JavaScript bundler