[Nuxt.js] Vueコンポーネントでの Code Splitting の利用

そのコンポーネントが読み込まれた時にだけimportしてほしいという場合に

Code SprittingはWebpackの機能なので詳しくは公式のドキュメントを見ると良い。

components

通常はscriptの冒頭で import/from しますが、

import Loading from '@/components/loading';
export default {
  components: { Loading },
// ...

componentsの所でimportメソッドが使えます。

export default {
  components: { Loading: () => import('@/components/loading') },
// ...

methods

なんらかのメソッド内でimportしたい場合は async/awwait で。

methods: {
  async handleClick() {
    const { default: hogeModule } = await import('hoge-module');
  }
}

設定

Webpackのoptimization設定はbuild内にあります。

• build.optimization
• build.optimizeCSS