@nuxtjs/router で route component を lazy load (遅延読込)する方法

Published: 2022/3/10


問題

Nuxt.js ではデフォルトだと /pages ディレクトリをベースにルーティングを行ってくれるが、サイトが複雑になっていくにつれ、 vue-router を直接に用いてルーティングを行いたくなってくる。 Nuxt においては、コミュニティパッケージとして公式が @nuxtjs/router のパッケージを提供している。

これを、 README 等に従って素直に利用していると、 router がすべての route コンポーネントを import することになる。 これは、なので、 webpack を利用していると、すべての route を一気に import することになり、特にクライアントが読み込む js のサイズが巨大化してしまい、サイトスピードに悪影響が出てきてしまう。

その対処法として、 vue-router には Route コンポーネントの遅延読み込み(Lazy Load)ができるようになっている。

ただ、これを素直に Nuxt でもやろうとすると、以下の問題が発生してしまい、ページが映らなくなってしまう。

render function or template not defined in component: anonymous

対処方法

上記の通りにすると解消する。 具体的には、

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'))

のようにするといける。


Tags: nuxt

About

エンジニアです。 仕事では Xincere Residence を作っています。 このサイトは個人のブログであり、所属団体の意見等とは関係がありません。

Tags