Help us understand the problem. What is going on with this article?

Nuxt.js でビルド時間を100倍高速化して作業時間が大幅upした件(HardSourceWebpackPluginの紹介)

More than 1 year has passed since last update.

概要

現在、Nuxt.js(v1.4.1) で開発しているサイトが「お客様ヘルプ」系のサイトなので文字数が多く、また語録やQAが増える毎にファイルが増える画面構成で、プログラムのビルド時間がどんどん長くなって来ました。1文字変えただけでコマンド "nuxt build" でjs,cssファイルを毎回ミニファイしてても仕方ないので、基本は"nuxt"で開発環境確認をしていたわけなのですが、、、ある日、お客様QAを大量に増やしたことがきっかけでビルド時間が激遅くなり、ビルド待ち、作業は止まり、メンバーは沈黙、過ぎる何も生まない時間、やがて不機嫌、なんとかならない?、イライラ、不平、不満、そして最終戦争勃発と。。。

な、なんとかせねばッ!!

と、言う事でその問題を解決するWebpackプラグインを見つけたので紹介します。

参考にさせて頂いたサイトは以下になりNuxt.js用に書き起こした感じです。
webpackのビルドを10倍高速化するプラグインの紹介
[Nuxt.js] hard-source-webpack-plugin導入時のエラー対処法

結果から言うと npm run dev(HOST=0.0.0.0 nuxt) をした時にビルド時間が桁違いに高速化しました。
hard-source 導入前

npm run dev
  nuxt:build App root: /home/dev/webapp +0ms
  nuxt:build Generating /home/dev/webapp/.nuxt files... +2ms
  ・
  ・
DONE  Compiled successfully in 231561ms

hard-source 導入後

npm run dev
  nuxt:build App root: /home/dev/webapp +0ms
  nuxt:build Generating /home/dev/webapp/.nuxt files... +2ms
   ・
   ・
DONE  Compiled successfully in -9199ms

マイナス -9199ms って…w 爆速過ぎるやろ!まぁ導入前の231561msもヤバイですが。

HardSourceWebpackPlugin

HardSourcePlugin は追加すると node_modules/.cache/hard-source/ と言うフォルダを作り、そこに中間キャッシュを作ることで次回以降はそちらを見にいく様になります。それでビルド時間短縮を実現している形です。

導入手順(Nuxt v1.4.1ベース)

  • HardSourcePluginをインストール
npm install --save hard-source-webpack-plugin
  • nuxt.config.js の buildに追記
// nuxt.config.js
module.exports = {
  router: // ...
  head: // ...
  env: // ...
  build: {
    extend(config, ctx) {
      const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
      config.plugins.push(new HardSourceWebpackPlugin())
    },
  }
}

これだけ

実行してみる

npm run dev や npm run build を普段通り実行すればOKです。
1回目の実行ではキャッシュを作るために普段と同じくらい時間がかかりますのでご注意を。
その際にnode_modules/.cache/hard-source/にハッシュ化されたキャッシュフォルダを生成します。
npm run dev 中に以下の様な文字がでてくればキャッシュ化されています。

[hardsource:12b44871] Using 19 MB of disk space.
[hardsource:12b44871] Tracking node dependencies with: package-lock.json, yarn.lock.
[hardsource:12b44871] Reading from cache 12b44871...

2回目の実行からは劇的に速くなるはずです。

ビルド時間が長くなって困っている方はぜひぜひお試しあれ。

キャッシュでエラーになった場合にキャッシュを消す方法

たまにキャッシュが上手く参照されずエラーが起こってしまう事があります。そういうときは一度キャッシュを削除して下さい。

rm -rf node_modules/.cache/hard-source/
toaru
toaru(とある)と言います。デザイン、マークアップ寄りのフロントエンドエンジニアです。Vue.js に興味を持ち、本職で率先して新システムの開発移行を行っています。そんなHTML,CSS,ちょいJavaScript,ちょいPHPしか知らない者が知らないながらに吸収した様々なちょい知識小ネタを投稿できればと思います。(主に自分用)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした