Webpackのコード分離「Code Splitting」を使用してvueアプリケーションの怠惰なロードを実現

テキストリンク:https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/
vueアプリケーションでは、怠け者のロードとコード分離技術を3つの階層で使用できます.

コンポーネント、通常はよく知られている非同期コンポーネント

ルーティング

Vuexモジュール

動的導入(webpack 2.0以上のサポート)を使用している共通性があります.
#Vueコンポーネントの怠惰なロード
このEgghead(海外のブログサイト)の記事「Vue非同期コンポーネントにコンポーネントをオンデマンドでロードする」には、すでに良い説明があります.
使用も簡単です.コンポーネントを登録するときにimportメソッドを使用すればいいです.

Vue.component("AsyncCmp", () => import("./AsyncCmp"));

And using local registration:
またはローカル登録を使用します.

new Vue({
  // ...
  components: {
    AsyncCmp: () => import("./AsyncCmp")
  }
});

import関数を矢印関数にパッケージすることで、Vueは要求を受信したときにのみ実行し、モジュールをロードします.
コンポーネントをインポートするときに名前付きエクスポートを使用する場合は、返されるPromise関数でオブジェクトを使用して解体できます.たとえば、KeenUIでUiAlertコンポーネントを使用します.

...
components: {
  UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}
...

#Vue routerリロード
Vue routerは怠け者のロードをサポートします.使い勝手も簡単で、コンポーネントを導入するときにimportメソッドを使います.たとえば、/loginルーティングでログインコンポーネントをリロードしたい場合は、次のようにします.

// Instead of: import Login from './login'
const Login = () => import("./login");

new VueRouter({
  routes: [{ path: "/login", component: Login }]
});

#Vuexモジュールリロード
VuexのregisterModuleメソッドを使用すると、Vuexモジュールを動的に作成できます.もし私たちのimportメソッドがESモジュールを荷重とするPromiseを返しているならば、私たちはそれを使用してこのモジュールを怠惰にロードすることができます.

const store = new Vuex.Store()

...

// Assume there is a "login" module we wanna load
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

#まとめ
VueとWebpackでは、怠け者のロードを使用するのは非常に簡単になりました.以上の内容を使用すると、appをいくつかの異なる面からブロックしてオンデマンドでロードすることができ、appの初期ロードを軽減することができます.
 
元の英語リンク:https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/