Gridsomeのビルドで「JavaScript heap out of memory」の対処方法

「JavaScript heap out of memory」はメモリ不足のエラー

「JavaScript heap out of memory」というのはNode.jsが実行できるメモリ容量が不足しているために起こるエラーのようです。Gridsomeはビルド時に変換データをメモリにモリモリ溜め込んでから出力するので、メモリが足りなくなるっぽいですね。

ネットで調べてみると、「ビルド時だけメモリを増やせば行ける」とあったので試してました。

NODE_OPTIONS="--max-old-space-size=4096" gridsome build

1,000ページくらいならこれで行けました。ただ、1,500くらいになるとダメですね。

しかも、CI/CDとなると4GBもメモリ積んでないので、どのみち運用的にはNGです。

データの構築が重いかも？

さらに調べてみたところ、「@gridsome/vue-remarkじゃなくて、@gridsome/source-filesystemにしてみたら？」というGithubのイシュースレッドを発見。

JavaScript heap out of memory generating 1200 pages | Github

メインの記事はTocを作る関係で@gridsome/vue-remarkがいいのですが、他のページは@gridsome/source-filesystemでも問題ないので、そちらにしてみたところ、メモリを増やさないでもあっさり1,000ページ以上をビルドできました。

問題なさそうなので、3,000ページ、5,000ページと増やしてみましたが、どちらもあっさりビルドできました。ローカル環境（macOS 10.14.6, 2.81 GHz Intel Core i5, 16GB RAM）で5,000ページのビルドが40秒ほどでした。

考えたみたら、@gridsome/vue-remarkはマークダウンをremarkするために処理をしているため、ここがネックだったようですね。@gridsome/source-filesystemは、単純にGraphQLにデータをインポートしてるだけなので軽いっぽいです。

「JavaScript heap out of memory」でビルドができないという方はぜひ試してみてください。