はじめに
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 を指定しないと、不要なコードも読み込まれてしまう可能性があります。
以下のように設定します。
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を削除して再インストール - パッケージをアップデート
警告の意味を理解し、適切に対処することで、より快適な開発環境を整えることができます。