npmのサムネイル画像



今現在のフロントエンドはBootstrapVueで、Laravel Mixを使って

npm run dev

コマンドで開発用コンパイルをして動作チェック、問題なければmasterブランチにマージしてデプロイというかたちになっています。「npm run dev」コマンドは複数のファイルを1つにまとめてくれるんですが、minifyはしません。一方で本番用コンパイルである

npm run production

の方は、まとめた上でminifyしてくれます。どれくらい小さくなるかは環境によると思いますが、僕の環境ではおおむね1/4程度にはなるようです。jsファイルやcssファイルは参照される頻度も高いので、これが小さくなるのはとてもデカい。というわけで、デプロイ前にはそれをしたかったんですが……これまでエラーが出て上手く行かなかったんですね。それがようやく解決出来ましたというお話。


【起きていた問題】 メモリエラー

npm run production

を実行すると次の様なエラーが出ます。

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

詳しいことはよくわかりませんが、どうやらメモリが足りないようです。メモリを増やしてビルドを行うオプションを付ければ良いといった情報が見つかりますが、上手く生きませんでした。パッケージのバージョンも最新版。



【解決方法】 Vagrantのメモリを増やした

ローカル環境は「Vagrant+VirtualBox」という定番の環境で動いているのですが、そのVagrantに割り振られているメモリが少なかったんですね。Vagrantはデフォルトで500MBまで確保するということになっているようですが、それが足りなかったと。


というわけで、Vagrantfileのコメントアウトを外してメモリを2,048MBに増やす。

# config.vm.provider "virtualbox" do |vb|
#   Display the VirtualBox GUI when booting the machine
#   vb.gui = true
# 
#   Customize the amount of memory on the VM:
#   vb.memory = "1024"
# end

config.vm.provider "virtualbox" do |vb|
#   Display the VirtualBox GUI when booting the machine
#   vb.gui = true
#
#  Customize the amount of memory on the VM:
  vb.memory = "2048"
end

これでVagrantを起動し直して、もう一度「npm run production」を実行したら……出来た!


参考)Vagrant&Virtual Box開発環境下でメモリと容量を増やす - Qiita


minify効果

npm run dev

ss_npmrundev.png

npm run prod

ss_npmrunprod



お試しください

ネットで検索してみてもいろいろと情報があって正解がよくわかりません。ひょっとすると問題となることは他にもいろいろとあって、僕にはたまたまVagrantのメモリがビンゴだったのかも知れませんが、まあ環境が壊れるような設定変更でもないので一度試してみてください。もしかしたら上手く行くかも。
  • About

    I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

    NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

    See Also
    Other Works
    Feed
  • Recent Hatena Bookmark
  • Monthly Archives
    Categories