Heroku
laravel
vue.js

Laravel + Vue.jsアプリをHerokuで動かしたら読み込みがやたら遅かった件への対応(原因調査〜対策〜結果)

■問題

Laravel + Vue.jsでWebサービスを作成して、Herokuにデプロイ。
HerokuからOpenAppでページを開いたのですが、
めちゃくちゃ重い。。。
1ページ読み込む毎に10秒〜15秒くらい待たされます。。

■原因調査

とりあえずどのファイルの読み込みがこんなに遅いのか見るために、GoogleChromeのデベロッパーツールを使いました。
ツールの「Network」タブを開くとどのリソースの読み込み時間や読み込みのタイミングを見ることが出来ます。
スクリーンショット 2017-09-04 2.22.05.png

これを見ると、
app.cssapp.jsの読み込み時間がやたら長いことが分かります。

app.cssapp.js、、、、LaravelMixか???
と思い、本番環境でのアセットコンパイルについて調べたところ以下の記事が出てきました。
http://qiita.com/llhrkll/items/513c23008b2596089a00

なるほど、本番環境でもアセットコンパイルが必要なのか。。(←当然?)

■対策

記事にある通りにwebpack.mix.jspackage.jsonapp.blade.phpを編集しました。

その後、

heroku run bash
npm run production

でHeroku上のリソースをコンパイルしました。

■結果

だいぶ速くなったw

スクリーンショット 2017-09-04 19.09.26.png

10~17sくらいかかっていた読み込み時間が1~2sまで短縮しました。
もっと短くできるのかもしれないけど一旦ここまで。
今は手動でnpm run productionやってるけどHerokuCI使って自動化もして行きたいですね。

こうやって問題解決して行く中で色々新しい知識が入ってくるのは楽しいです^^
ご指摘あれば宜しくお願いします!