vue-router webpackでページごとにファイルを分割する
vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。
ページごとにファイルを分割し、そのページがアクセスされたタイミングでそのjsファイルを読み込むようにすれば最初のロード時間を短縮できます。
一見実装が難しそうですが、vue-routerとwebpackを使えば簡単に実現できます。
以下の説明の開発環境やフォルダ構成はvue-routerを導入してSPAを作成するで扱ったものと同様とします。
router.jsの修正
コンポーネントの読み込み方法を以下のように設定します。
router.jsimport Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: resolve => {
require.ensure(['js/pages/Top.vue'], () => {
resolve(require('js/pages/Top.vue'));
}, 'top');
} },
{ path: '/about', component: resolve => {
require.ensure(['js/pages/About.vue'], () => {
resolve(require('js/pages/About.vue'));
}, 'about');
} },
{ path: '/contact', component: resolve => {
require.ensure(['js/pages/Contact.vue'], () => {
resolve(require('js/pages/Contact.vue'));
}, 'contact');
} }
];
const router = new VueRouter({
routes,
mode: 'history'
});
export default router;webpack.config.jsの修正
上記のように設定するとファイルが分割されますが、分割されたファイル名や出力パスをwebpack.config.jsで設定します。
webpack.config.jsoutput: {
path: __dirname + '/public',
publicPath: '/',
filename: 'js/app.js',
chunkFilename: 'js/[name].chunk.js'
}実行
ビルドをするとメインのapp.jsと同じ場所にtop.chunk.jsとabout.chunk.jsとcontact.chunk.jsのファイルが作成されます。
実際にトップページにアクセスしてみると、app.jsとtop.chunk.jsが読み込まれ、aboutページに遷移するタイミングでabout.chunk.jsが読み込まれ、contactページに遷移するタイミングでcontact.chunk.jsが読み込まれることを確認できます。