小編給大家分享一下vue+webpack2如何實現路由懶加載，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
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 }
]
})看完了這篇文章，相信你對“vue+webpack2如何實現路由懶加載”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
