[パフォーマンスの最適化] Vue がルートの遅延読み込みを実装する方法

序文：

ルートの遅延読み込みを使用する理由。ルートの遅延読み込みを使用する場合

目的：

カスタマーエクスペリエンスを向上させるために、最初の画面コンポーネントの読み込みが速くなり、要求されるリソースの数が減り、ネットワークの状態が悪いために画面が白くなる可能性が減ります。

意味：

パッケージでアプリを構築する場合、JavaScript バンドルが非常に大きくなり、ページの読み込みに影響を与える可能性があります。異なるルートに対応するコンポーネントを異なるコードブロックに分割し、ルートにアクセスしたときに対応するコンポーネントを読み込むことができれば、より効率的になります。

レトロフィットの例 (遅延読み込みは実装されていません)

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld'
export default new Router({
    routes: [
        {
            path: '/Foo',
            name: 'Foo',
            component: HelloWorld 
        }
    ]
})

実現方法

1. Vue 非同期コンポーネント

import Vue from 'vue';
import Router from 'vue-router';
export default new Router({
    routes: [
        {
            path: '/HelloWorld',
            name: 'HelloWorld',
            component: resolve => require(['../pages/HelloWorld/index'], resolve)
        }
    ]
})

2.ES6のimport()

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld= () => import('../components/HelloWorld')
export default new Router({
    routes: [
        {
            path: '/HelloWorld',
            name: 'HelloWorld',
            component: HelloWorld
        }
})

3. 拡張機能をインポート --> webpack を使用してコンポーネントをブロックにグループ化

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
// const HelloWorld= () => import('../components/HelloWorld')
// const Foo = () => import('../components/Foo')

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
const HelloWorld= () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/HelloWorld')
const Foo= () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
export default new Router({
    routes: [
        {
            path: '/HelloWorld',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/Foo',
            name: 'Foo',
            component: Foo
        }
    ]
})

概要: ルーティングに一般的に使用される 2 つの遅延読み込み方法

1. Vue非同期コンポーネントでルート遅延読み込みを実現

　　コンポーネント: resolve=>(['ロードする必要があるルートのアドレス', resolve])

2. es が提案するインポート (この方法をお勧めします)

　　const HelloWorld = () =>import('ロードする必要があるモジュールのアドレス')

コンポーネントをチャンクにグループ化したい場合は、webpackChunkName を追加して import

参照:

「Vue-router ルーティング遅延読み込み」