vue+webpack2實作路由懶載入的方法介紹

下面Vue.js教學專欄跟大家介紹vue webpack2實作路由的懶載入的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

當打包建置應用程式時，Javascript 套件會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼區塊，然後當路由被存取的時候才載入對應元件，這樣就更有效率了。

結合 Vue 的非同步元件和 Webpack 的程式碼分割功能，輕鬆實現路由元件的懶惰載入。

首先，可以將非同步元件定義為傳回一個Promise 的工廠函數(該函數傳回的Promise 應該resolve 元件本身)：

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

第二，在Webpack 2 中，我們可以使用動態import語法來定義程式碼分塊點(split point)：

import('./Foo.vue') // 返回 Promise

結合這兩者，這就是如何定義一個能夠被Webpack 自動程式碼分割的非同步元件。

const Foo = () => import('./Foo.vue')

在路由設定中什麼都不需要改變，只需要像往常一樣使用 Foo：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

相關推薦：

2020年前端vue面試題大匯總（附答案）

vue教學推薦：2020最新的5個vue.js影片教學精選

#更多程式相關知識，請造訪：程式設計入門！ ！

以上是vue+webpack2實作路由懶載入的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！