vue-cli 3、webpack、Vueルーターを使用した遅延読み込みコンポーネント

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

SPA（シングルページアプリケーション）は、多くの場合、複数のJavaScriptバンドルファイルに分割できる数十または数百のコンポーネントで構成されています。この投稿の目的は、コンポーネントがルート変更から要求された場合にのみ、この分割を行う1つの方法と、各ファイルを非同期にロードする方法を示すことです。この非同期動作は遅延読み込みと呼ばれ、初期バンドルサイズを小さくすることができます。

プロジェクトの作成

新しいプロジェクトを開始し、 vue-cli 3 を使用して、次のコマンドに従ってプロジェクトを作成しましょう。

$ vue create my-app
...
Vue CLI v3.0.0-beta.9
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

ヒント：package.jsonファイル内のすべての構成ルールをグループ化することを選択します。

作成されたプロジェクトには、ビューがあります。Home.vueとAbout.vueです。プロジェクトを実行すると、yarn serveまたはnpm run serveコマンドを使用して、次の図のようにトップメニューからビューにアクセスします。

これらの2つのファイル、Home.vueとAbout.vueは、アプリケーションの初期化時にロードされます。多くのコンポーネントを含む重要なプロジェクトの場合、すべてのファイルを一度にロードすることは実行不可能なことがよくあります。要求されたとおりにファイルをロードする必要があります。

webpackがサポートする動的インポートというJavaScript機能のおかげで、遅延読み込みを簡単に実装できます。現在、src/router.jsファイルのコードは次のとおりです。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

遅延読み込みを設定するには、代わりにsrc/router.jsファイルを次のように変更します。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

function loadView(view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: loadView('Home')
    },
    {
      path: '/about',
      name: 'about',
      component: loadView('About')
    }
  ]
})

変更点の内訳は次のとおりです。

1-homeおよびaboutコンポーネントの静的インポートを削除しました。

2- loadview関数を作成しました。この関数は、import関数を使用してVueコンポーネントを動的にインポートします。

3- import関数では、/* webpackChunkName: "view-[request]" */を使用して、動的にインポートされる各ファイルの名前をマークしました。

4-ルート構成はloadViewメソッドを使用して、コンポーネントの名前を渡します。

このように、npm run buildまたはyarn buildを使用してプロジェクトをコンパイルすると、次の結果が得られます。

view-Home-vue...とview-About-vue...の2つのファイルが作成されていることに注意してください。これらは、本番サーバーにオンデマンドでロードされます。

動的インポートとESLint

この記事の執筆時点では、次の図のように、import関数を認識できないため、小さなESLintがあります。

これを修正するには、package.jsonファイルを開き、次の構成を追加します。


 "eslintConfig": {
    "root": true,
    "parserOptions": {"parser": "babel-eslint"},
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ]
  },

getdocs

13036