はじめに

Next.js を使って開発していると、npm run dev 実行時に以下のような警告が大量に表示されることがあります。

<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (100kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

この記事では、この警告の原因と対処法を記載します。

結論

next.config.js または next.config.mjs に optimizePackageImports を追加することで、パッケージのバンドルサイズを抑え、警告を抑制できます。

// next.config.mjs
export default {
  experimental: {
    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
  },
};

今回のようにコンポーネントライブラリを使っている場合は特に効果的です。

発生環境

OS: Windows 11
VSCode
Next.js 15.3.2
Mantine 7.15.3
Node.js 22.13.1
npm 11.0.0

警告の詳細と原因

この警告は Webpack の PackFileCacheStrategy によるものです。

開発時に Webpack がキャッシュを高速化するために使用するシリアライズ処理で、100KB 以上の長い文字列を扱うと、逆に復元（デシリアライズ）時のパフォーマンス低下の可能性があります。

Serializing big strings (100kiB) impacts deserialization performance

ライブラリが未最適化の状態で大量のコードを含んでいるとき、特に発生しやすいです。

対処法

1. Mantine の最適化設定を追加する

Mantine はツリーシェイキングに対応していますが、Next.js に optimizePackageImports を指定しないと、不要なコードも読み込まれてしまう可能性があります。

以下のように設定します。

next.config.mjs

export default {
  experimental: {
    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
  },
};

これにより、使用しているコンポーネントのみがバンドルに含まれ、警告の発生が抑えられます。

Chakra UI など他のコンポーネントライブラリでも同様の最適化が可能です。

2. キャッシュと依存関係の再構築

警告が出続ける場合は、一度キャッシュと依存関係をリセットしてみてください。

rm -rf .next node_modules
npm install
npm run dev

3. パッケージのアップデート

Next.js、Mantine、Webpack のバージョンが古いと、最適化されないことがあります。

npm outdated
npm update

警告を放置してもいいの？

この警告は「致命的なエラー」ではなく、あくまで「開発体験のパフォーマンス低下」の注意喚起です。

ただし、警告が大量に出ている状態では、以下のような不都合を引き起こす可能性があります。

npm run dev の起動が遅くなる
ホットリロードが重くなる
開発中の UI のレスポンスが悪くなる

そのため、なるべく早めに対処するのがおすすめです。

まとめ

Next.js での開発中に webpack.cache.PackFileCacheStrategy の警告が出る場合、以下を試してみましょう。

optimizePackageImports を next.config.mjs に追加
.next ディレクトリと node_modules を削除して再インストール
パッケージをアップデート

警告の意味を理解し、適切に対処することで、より快適な開発環境を整えることができます。

参考