このブログでは Nuxt Content を使用していますが，記事が増えるにつれてビルド時間が長くなってきました．

最初は１分程度だったのが今では３分．この調子だとかなり長くなりそうなので高速化してみます．

設定方法

下記の設定で Webpack のビルド設定が変更されます．

export default {
  target: 'static',

  ...,

  build: {
    parallel: true,
    cache: true,
    hardSource: true,
  },
}

設定内容

上記三つの設定を有効にすると，Webpack の各種プラグインを使用してビルドを行うようになります．

• thread-loader：Worker pool に分割して並列処理
• terser-webpack-plugin：JSファイルを縮小化
• cache-loader：loader の処理結果をキャッシュ
• HardSourceWebpackPlugin：ソースをキャッシュ

HardSourceWebpackPlugin はキャッシュされる前の一回目のビルドでは高速化されませんが，キャッシュが存在する二回目以降は高速化が期待されます．

Nuxt.js ではビルドオプションで指定することで使えるようになっていますが，現在ベータ版です．

結果

キャッシュ有効化前は約 180s かかったのに対し，有効化後は約 100s となりました．

記事を追加してアップロードする度にビルドが必要になるため，かなり作業時間を節約できると思います．

また，たまに TIMEOUT エラーを吐いていたため，同時に解決されました．

参考

• The build Property - NuxtJS
• Nuxt.jsのビルドを高速化してみる - Holmes開発者ブログ