Nuxt + Storybook のバンドルサイズをコントロールする

こんにちは、フロントエンドグループ EM のこん(@k0n_karin)です。

今回は、@nuxtjs/storybook を使用している際に、バンドルサイズをコントロールする方法についてお話します。

storybook.nuxtjs.org

TL;DR

pages や plugins などを使わない場合は、別名のディレクトリに一時的に変更してからビルドすると、バンドルサイズを削減できる。.nuxtignoreでもいいし、適当なshellを書いてもいい。

問題の背景

@nuxtjs/storybook を使うと、pages や plugins が自動でインポートされます。これは Nuxt の便利な機能の一つですが、Storybook では使わないページやプラグインもあり、ビルドする際にもすべてバンドルされてしまうため、バンドルサイズが肥大化する問題があります。

実際のプロジェクトで検証したところ、 FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory が発生し、ビルド時にメモリリークを起こしていました。

NODE_OPTIONS=--max-old-space-size=8192 storybook build のように Node.js のヒープメモリの上限を引き上げないと、そもそもビルドできない状況でした。

一時的なディレクトリ移動で解決する

Storybook で使わないファイルを、ビルド時のみ除外することでバンドルサイズを削減できます。具体的には、Auto Import 対象のディレクトリを一時的に別名に変更することで実現します。

以下は実際に使用しているシェルスクリプトの例です。plugins/i18n.ts については、Storybook でも言語定義として使用するケースがあるため残しています。

# 一時的にNuxtのAuto Import対象から外してバンドルサイズを減らす
mv pages .pages

# plugins/i18n.tsはコンポーネント内で使うため残す
mkdir -p .plugins
for file in plugins/*; do
  if [ "$file" != "plugins/i18n.ts" ] && [ -f "$file" ]; then
    mv "$file" ".plugins/$(basename "$file")"
  fi
done

storybook build

# もとに戻す
mv .pages pages

if [ -d ".plugins" ]; then
  for file in .plugins/*; do
    if [ -f "$file" ]; then
      mv "$file" "plugins/$(basename "$file")"
    fi
  done
  rmdir .plugins
fi

ちなみに、Storybookのビルド時だけ.nuxtignoreを使う方法も試しましたが、shellを使ったほうがバンドルサイズを減らせました。何故かははっきりしていません。

nuxt.com

効果と注意点

この手法により、不要なページやプラグインがバンドルから除外され、大幅なサイズ削減が期待できます。ただし、Storybook で実際に使用しているプラグインまで除外してしまわないよう注意が必要です。

プロジェクトの要件に応じて、除外するファイルやディレクトリを調整してください。

おわりに

@nuxtjs/storybook のバンドルサイズ削減について紹介しました。Storybook のビルド時間短縮にも繋がるので、ぜひ試してみてください。もしこの記事で興味を持っていただけたらぜひカジュアル面談でお話しましょう！

open.talentio.com

Yappli Tech Blog

株式会社ヤプリの開発メンバーによるブログです。最新の技術情報からチーム・働き方に関するテーマまで、日々の熱い想いを持って発信していきます。