當打包構建應用時,Javascript 包會變得很是大,影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊,而後當路由被訪問的時候才加載對應組件,這樣就更加高效了。html
結合 Vue 的 異步組件 和 Webpack 的 code splitting feature, 輕鬆實現路由組件的懶加載。vue
咱們要作的就是把路由對應的組件定義成異步組件webpack
const Foo = resolve => { // require.ensure 是 Webpack 的特殊語法,用來設置 code-split point // (代碼分塊) require.ensure(['./Foo.vue'], () => { resolve(require('./Foo.vue')) }) }
這裏還有另外一種代碼分塊的語法,使用 AMD 風格的 require,因而就更簡單了:git
const Foo = resolve => require(['./Foo.vue'], resolve)
不須要改變任何路由配置,跟以前同樣使用 Foo
:github
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })
有時候咱們想把某個路由下的全部組件都打包在同個異步 chunk 中。只須要 給 chunk 命名,提供 require.ensure
第三個參數做爲 chunk 的名稱:web
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
Webpack 將相同 chunk 下的全部異步模塊打包到一個異步塊裏面 —— 這也意味着咱們無須明確列出 require.ensure
的依賴(傳空數組就行)。npm
若是你想在組件加載的時候能夠有loading提示也一樣的很簡單數組
這裏以mint-ui爲例異步
import { Indicator } from 'mint-ui'; //前提是npm i mint-ui -S
而後你就只須要稍微加一點代碼ide
const Foo = resolve => { Indicator.open(); require.ensure(['./Foo.vue'], () => { resolve(require('./Foo.vue')) Indicator.close() }) } //這樣就能夠實現組件在異步加載的時候顯示loading
效果以下