Webpack のコード分離を使用して Vue の読み込みを実装する方法

この記事の内容は、Webpack のコード分離を使用して Vue の読み込みを実装する方法についてです。必要な方は参考にしていただければ幸いです。

Vue プロジェクトが非常に大きくなった場合は、Webpack のコード分離機能を使用して、Vue コンポーネント、routes、または Vuex を分離します。オンデマンドでロードすると、アプリの最初の画面のロード速度が大幅に向上します。 Vue Components，routes或Vuex的代码进行分离并按需加载，会极大的提高App的首屏加载速度。

在Vue的项目中，我们可以在三种不同的情况下使用懒加载和代码分离功能：

• Vue组件，也称为异步组件

• Vue-Router

• Vuex

三者的共同点都是使用的动态import，这在Webpack的第二个版本就开始被支持。

在Vue组件中进行懒加载

在Eggheads中有关于使用Vue异步组件实现按需加载组件的解释。

实现异步组件只需要使用import函数去注册组件即可：

Vue.component('AsyncCmp', () => import('./AsyncCmp'))

也可以使用本地注册组件的方式：

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这个路由下懒加载Login组件。

// 不再使用 import Login from './login'
const Login = () => import('./login')

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

在Vuex中进行懒加载

Vuex的registerModule方法允许我们动态的创建Vuex的模块。如果我们使用import函数在Promise

Vue プロジェクトでは、次の 3 つの異なる状況で遅延読み込み関数とコード分離関数を使用できます:

Vue コンポーネント (非同期コンポーネントとも呼ばれます)

Vue-Router

Vuex

3 つの共通点は、Webpack の 2 番目である動的インポートの使用です。バージョン1から。

Vue コンポーネントでの遅延ロード

Vue 非同期コンポーネントを使用して、Eggheads でコンポーネントをオンデマンドでロードする方法についての説明があります。

非同期コンポーネントを実装するには、import 関数を使用してコンポーネントを登録するだけです:

const store = new Vuex.Store()

...

// 假设我们想加载'login'这个模块
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

ローカル登録方法を使用することもできます: 🎜rrreee🎜 矢印関数を使用して、 import 関数、Vue は、コンポーネントが必要なときにコンポーネントのロードを要求するコードを実行します。 🎜🎜インポートされたコンポーネントが名前付きメソッドを使用してエクスポートされた場合、Promise の戻り値でオブジェクトの構造化を使用して、コンポーネントをオンデマンドでロードできます。以下は KeenUI の UiAlert コンポーネントをロードする例です。 🎜rrreee🎜🎜🎜🎜Vue ルーターでの遅延ロード🎜🎜🎜Vue ルーターは遅延ロードをネイティブにサポートしています。コンポーネントの遅延読み込みと同じ方法で、import 関数が使用されます。たとえば、ルート /login の下に Login コンポーネントを遅延ロードしたいとします。 🎜rrreee🎜🎜🎜🎜Vuex での遅延読み込み🎜🎜🎜Vuex の registerModule メソッドを使用すると、Vuex モジュールを動的に作成できます。 import 関数を使用してモジュールを Promise のペイロードとして返すと、遅延読み込みが実現します。 🎜rrreee🎜🎜🎜🎜 概要🎜🎜🎜 Vue + Webpack では遅延読み込みは非常に簡単です。上記で学んだ方法をすぐに使用して Vue プロジェクトのコードを分離し、必要なときにオンデマンドでロードすることで、アプリケーションの最初の画面をロードする時間を大幅に短縮できます。 🎜🎜関連する推奨事項: 🎜🎜🎜 JS で一般的に使用されるメソッドの体系的なまとめ (コレクション) 🎜🎜🎜🎜 マルチページ アプリケーションを構築するための Webpack4 および React 実装メソッド 🎜🎜🎜🎜

以上がWebpack のコード分離を使用して Vue の読み込みを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。