Vue-cli3、webpack、Vueルーターを使用した遅延読み込みコンポーネント
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" ] },