# シングルページアプリケーションは初回ロードに時間がかかる
シングルページアプリケーションの特性上、初回のロードでJSファイルを大量に読み込むため初回読み込みにどうしても時間がかかりがちです。
# ファイルを分割する
Vueとwebpackの機能を使ってバンドルファイルを分割するすることができます。 Vue Routerを使用している前提です。
ページをグループ化してJSファイルを分割します。
グループ化するページは/* webpackChunkName: "about" */を使って指定します。
/router/index.js
{
path: '/signin',
name: 'SignInPage',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "signin" */ '../components/page/SignInPage.vue')
},
{
path: '/task',
name: 'TaskPage',
component: () => import(/* webpackChunkName: "other" */ '../components/page/TaskPage.vue')
},
{
path: '/habit',
name: 'HabitPage',
component: () => import(/* webpackChunkName: "other" */ '../components/page/HabitPage.vue')
},
上のコードはサインインページとその他のページでJSファイルを分割しています。 こうすることで、サインインページでサインイン後のJSファイルが読み込まれなくなるので速度アップが期待できます。
# 注意
分割し過ぎると逆に遅くなってしまうので注意が必要です。