vue2.x 路由懶加載 優化打包體積
阿新 • • 發佈:2018-01-22
2.x 方式 sync guid nbsp style 開發 pan outer
當打包構建應用時,Javascript 包會變得非常大,影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊,然後當路由被訪問的時候才加載對應組件,這樣就更加高效了。
結合 Vue 的異步組件和 Webpack 的代碼分割功能,輕松實現路由組件的懶加載。
首先,可以將異步組件定義為返回一個 Promise 的工廠函數 (該函數返回的 Promise 應該 resolve 組件本身):
const Foo = () => Promise.resolve({ /* 組件定義對象 */ })
第二,在 Webpack 2 中,我們可以使用動態 import語法來定義代碼分塊點 (split point):
import(‘./Foo.vue‘) // 返回 Promise
註意:如果您使用的是 Babel,你將需要添加
syntax-dynamic-import
插件,才能使 Babel 可以正確地解析語法。
結合這兩者,這就是如何定義一個能夠被 Webpack 自動代碼分割的異步組件。
const Foo = () => import(‘./Foo.vue‘)
實際開發中發現使用如下方式也可以
const Foo = (resolve) => { import(‘components/Foo.vue‘).then((module) => { resolve(module) }) }
在路由配置中什麽都不需要改變,只需要像往常一樣使用 Foo
:
const router = new VueRouter({
routes: [
{ path: ‘/foo‘, component: Foo }
]
})
vue2.x 路由懶加載 優化打包體積