@nuxtjs/router で route component を lazy load (遅延読込)する方法
Published: 2022/3/10
問題
Nuxt.js ではデフォルトだと /pages ディレクトリをベースにルーティングを行ってくれるが、サイトが複雑になっていくにつれ、 vue-router を直接に用いてルーティングを行いたくなってくる。
Nuxt においては、コミュニティパッケージとして公式が @nuxtjs/router のパッケージを提供している。
GitHub - nuxt-community/router-module: Nuxt.js module to use router.js instead of pages/ directory.
Nuxt.js module to use router.js instead of pages/ directory. - GitHub - nuxt-community/router-module: Nuxt.js module to use router.js instead of pages/ directory.
github.com
これを、 README 等に従って素直に利用していると、 router がすべての route コンポーネントを import することになる。 これは、なので、 webpack を利用していると、すべての route を一気に import することになり、特にクライアントが読み込む js のサイズが巨大化してしまい、サイトスピードに悪影響が出てきてしまう。
その対処法として、 vue-router には Route コンポーネントの遅延読み込み(Lazy Load)ができるようになっている。
Lazy Loading Routes | Vue Router
router.vuejs.org
ただ、これを素直に Nuxt でもやろうとすると、以下の問題が発生してしまい、ページが映らなくなってしまう。
render function or template not defined in component: anonymous
対処方法
vue + nuxt: dynamic import of route pages fails at render
I'm trying to speed up the loading of our vue/nuxt application. I follow the nice idea of splitting routing page into asynchronous loading as in https://router.vuejs.org/guide/advanced/lazy-loading.
stackoverflow.com
上記の通りにすると解消する。 具体的には、
import FooRoute from '~/path/to/foo.vue'
としていたところを、
const dynamically =
<T extends { default?: any }>(promise: Promise<T>) =>
promise.then(o => o.default || o)
const FooRoute = dynamically(import('~/path/to/foo.vue'))
のようにするといける。
