Nuxt v2 のビルドが重すぎるので軽くする

こんにちは。shundroid です。お久しぶりです。
記事を書くたびにお久しぶりになりますねw

早いもので高校に入学してから1年になります。
この1年はプログラミング以外のことにもいろいろチャレンジして、
充実した高校生活を送ることができました。

クラス替えがドキドキ…

さて、今回は割と今年(少ない機会でも)愛用した Nuxt のビルド速度を
向上させる方法を紹介します。

あ、そだそだ、今年はプログラミングを目的にしてプログラミングすることは少なかったんですけど、
割と学校の発表で(Nuxtを使って)デモアプリを作ったり、ディベートの授業で電子投票用のシステムを作ったりと、
「手段」としてプログラミングをすることが多かったです。

プログラミングのスキルを身に着けておいて、できることが広がったので、
2020年プログラミング必修化で、よりプログラミングが普遍的なものとなり、
学校での学びが深められるようになるとよいと思います。

使うもの

Webpack の hard-source-webpack-plugin です。
これを使うことで、ビルド時のキャッシュを取ってくれるので、二回目以降のビルドが爆発的に速くなります。

下の「参考」の記事では、DllPlugin というものも紹介しています。
しかし使ってみたものの、hard-source-webpack-plugin と比べると効果が少ないので、
今回は割愛したいと思います。

ポイント

webpack.config.js を nuxt を通していじる

実際に上のリンクの readme を見ることで、生の webpack への導入手順は分かります。
が、今回は nuxt v2 で行いたいです。つまり、webpack の config を、nuxt を通していじる方法を知ることが大事になってきます。
これが分かれば、おそらく DllPlugin の導入方法もわかるでしょう。

やってみる

プラグインの導入

yarn:

$ yarn add --dev hard-source-webpack-plugin

npm:

$ npm i -D hard-source-webpack-plugin

※ i は install、 -D は --save-dev の省略形

nuxt.config.js の変更

const pkg = require('./package')
// 以下、追加
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
// ここまで

module.exports = {
  // ...
  /*
  ** Build configuration
  */
 build: {
   /*
   ** you can extend webpack config here
   */
  extend(config, ctx) {
    // ...
    // 以下、追加
    config.plugins.push(new HardSourceWebpackPlugin())
    // ここまで
  }
 }
}

予想以上に簡単でした。今回薄いな(確定)

やってみた

yarn:

$ yarn dev

npm:

$ npm run dev

１回目（キャッシュ未反映）

Client 側が 1.27m です。単位はm。つまり分です。
Server 側が 58.34s です。遅いですね。

２回目（キャッシュあり）

えっ速い
Client 側が 2.14s、Server 側が 34.45s です。
かなり速度が上がっていることがわかります。

まとめ

これは頼もしいですね。
Nuxt は SSR にしてくれるのもありますが、
実際 express のサーバーをセットアップしてくれるのがずいぶん楽なので、
使っています。

これでより良い Nuxt ライフとともに、新学期を迎えられそう！

参考

https://qiita.com/kmdsbng/items/d23f9b5f5fbc8869baad#fnref1