Nuxt.jsのビルドが遅かったので、原因を突き止めてビルド時間削減する

こんにちは！

Nuxt.jsで開発を続けているといつの間にかビルド時間が長くなっていませんか？
今回はビルドに10分かかっていたNuxt.jsプロジェクトを1分でビルドできるようになったという話です。
10分はかかりすぎですよね…

目次

1. お手軽にビルドのオプションを修正
2. 原因はなにか分析する
3. styleResourceの使い方見直し
4. 説明
5. まとめ

お手軽にビルドのオプションを修正

まず試したのはこちらでした。

• nuxt.config.js

  build: {
    hardSource: true,
  },

色々なサイトで見かけてすぐに飛びつきました。
結果は2回目以降はだいぶ速度改善されて、これだけでストレス80%減しました。
ただ、1回目のビルドは激重。
そして2回目以降についても普通のNuxt.jsプロジェクトに比べたらHot Reloadがどう考えても遅すぎます。
また、画面表示もかなり重く、開発効率がかなり下がっている状態でした。

原因はなにか分析する

なにはともあれ

yarn build --analyze

レポートを確認したところ、ほぼすべての独自コンポーネントで2MBものファイルサイズになっていました。
通常多くても100KBとか200KB程度だと思うのでどう考えても異常です。

なんとなく重くなった前後と全体的に全てのコンポーネントでファイルサイズが大きくなったところから推測しました。

「styleResourceだ…」（実際はfontawesomeを疑ったり、その他のnuxt.configの設定を疑ったり、紆余曲折しています）

styleResourceとは

各コンポーネント内で @import するのが面倒臭いので、scss変数やmixinを使えるように各コンポーネントに事前読み込みしちゃおう。

といったもの。

はい。これでbootstrapとbootstrap-vueの全scssファイルを読み込んでいたのが大きな問題でした。

styleResourceの使い方見直し

問題となっていたnuxt.config.jsのコードはこちら

• nuxt.config.js

styleResources: {
    scss: [
      '@/assets/stylesheets/customize.scss',
      '@/node_modules/bootstrap/scss/bootstrap.scss',
      '@/node_modules/bootstrap-vue/src/index.scss',
    ],
  },

概要を知るとこの設定がどれだけ恐ろしいことしているかわかりますよね…笑

結果以下のように修正しました。

• nuxt.config.js

  styleResources: {
    scss: ['@/assets/stylesheets/variables.scss'],
  },

  css: [
    '@/assets/stylesheets/customize.scss',
  ],

  build: {
    babel: {
      compact: true,
    },
  },

• variables.scss

$silver: #c0c0c0;
$bronze: #cd7f32;
// 略... 変数の設定やmixinの設定が続く

// bootstrapの必要な変数やmixinが設定されているものだけimportする
@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';

• customize.scss

@import './variables.scss';

@import '../../node_modules/bootstrap/scss/bootstrap.scss';
@import '../../node_modules/bootstrap-vue/src/index.scss';

// .. その他scssのインポート

説明

上記のように修正すると、

• 各コンポーネントで@importを使わずに$silverや@include xxxなどのようなscssの恩恵が受けられる
• 最小限のimportになっているのでビルドが軽くなる
• bootstrapやカスタマイズのcssはstyleResourceではなくcssディレクティブでインポートするので、bootstrapのレイアウトは通常通りあたる

となるので、scssの変数を@importなしに使いつつ、ビルドもそこまで遅くならないという良コスパな？設定にできました。

ただ、variable.scssはcssとstyleResourceの両方で読み込んでいるので無駄はある…というところがちょっと気持ち悪いところです。が、利便性とパフォーマンスを考えてこのような構成にしました。

まとめ

なかなかビルド速度の原因解明って難しいですよね。
とにかく--analyzeして原因を推測して確認する。ってことが大事ですね。
特定のファイルのサイズだけがやけに大きかったらそのファイルだけの問題ですが、全体が大きかったらnuxt.config.jsの設定を疑って、全体に影響を及ぼすパッケージは何を使っているかな？って流れで考えると良さそうです。

誰かの参考になれば幸いです。