vue 組件按需引用,vue-router懶加載,vue打包優化,加載動畫

當打包構建應用時,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) 

不須要改變任何路由配置,跟以前同樣使用 Foogithub

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

效果以下

相關文章
相關標籤/搜索