質問: 今までVue.js + browserifyでSPAを構築していたのですが、browserifyでビルドしたjsファイルのサイズがかなり大きくなってしまいました。 そのため、本番環境として使用予定のHerokuにデプロイした状態で画面を表示しようとすると、初期ローディングで7~8秒かかってしまっていました。 ビルドツールをwebpackに変更し、子コンポーネント部分のjsを非同期ローディングすることで初期ローディングを軽減できるのではないかと考え実施してみた結果、期待通り初期ローディングの時間は劇的に改善されたのですが、今度は表題の現象が発生してしまいました。 もう少し詳しく説明すると、「一度表示した画面から別画面に切り替えた後で再表示しようとしても、何も表示されない」という状況です。 画面切り替えにはvue-routerを使用しています。 現象発生までの具体的な手順は以下です。 1. 画面を初期表示する 2. ページ内のリンクをクリックし、子コンポーネントを切り替える 3. ページ内のリンクをクリックし、1.で表示した子コンポーネントに再度切り替える。 4. 1.の内容が表示されず、子コンポーネントが表示されるべき箇所が真っ白 インスタンスをキャッシュすれば良いのかと思い、``も試してみましたが、改善されませんでした(子コンポーネント全体をkeep-aliveで囲む、router-viewの部分をkeep-aliveで囲む等) webpack、非同期コンポーネントいずれも今回の対応で初めて使用するため、どこから調べるべきか皆目検討をつけられていません。 上記現象の原因、原因として考えられること、原因特定の足がかりとして確認すべきこと等について、情報をお持ちの方がいましたらぜひご教授ください。
回答: 解決しました。Vue.js 2.0 + webpack2です。 当初はvue-routerのGitBookを参考に、以下のコードで非同期ローディングを実施していました。 ``` const Foo = require(['path/to/component.vue'], resolve); ``` 一方、vue-routerのgithubリポジトリ上にあるサンプルを見ると`dynamic import`という記法が用いられていました。 ``` const Foo = () => import('./Foo.vue') ``` こちらに変更したところ、正常に画面切り替えを行うことができるようになりました。