Vue-組件懶加載

在單頁應用的世界，隨着項目的復雜化，webpack打包后的文件越來越大，進入頁面時，加載內容過多導致加載時間變長，不利於用戶體驗。

那什么是懶加載？

懶加載也叫延遲加載，即需要的時候進行加載。

1) 先來看看平時路由是如何配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/homePage'
import Detail from '@/pages/detail/detailPage'
import Content from '@/pages/content/contentPage'
import Index from '@/pages/index'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/from',
      name: 'index',
      component: Index,
      children: [
        {
          path: 'page1',
          name: 'tab1',
          component: Home
        },
        {
          path: 'page2',
          name: 'tab2',
          component: Detail
        },
        {
          path: 'page3',
          name: 'tab3',
          component: Content
        }
      ]
    }
  ]
})

打包結果截圖：

頁面請求截圖（所有內容都打包到app.js里面）：

2) 再來看看路由頁面如何配置懶加載

• 利用使用import()配合webpack動態導入模塊
• webpackChunkName:  webpack 2.6.0以后，支持使用注釋的方式給動態導入的模塊添加chunk name

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/from',
      name: 'index',
      component: () => import(/* webpackChunkName: 'index' */ '../pages/index'),
      children: [
        {
          path: 'page1',
          name: 'tab1',
          component: () => import(/* webpackChunkName: 'index/tab1' */ '../pages/home/HomePage')
        },
        {
          path: 'page2',
          name: 'tab2',
          component: () => import(/* webpackChunkName: 'index/tab2' */ '../pages/detail/detailPage')
        },
        {
          path: 'page3',
          name: 'tab3',
          component: () => import(/* webpackChunkName: 'index/tab3' */ '../pages/content/contentPage')
        }
      ]
    }
  ]
})

打包結果截圖：

頁面請求截圖（根據上面的配置可知實際還有chunk2, chunk3還未加載，需要切換到對應的頁面才會按需加載出來）：

3) 除了在路由頁面配置懶加載，路由頁面中的組件也可實現懶加載

export default {
  name: 'index',
  components: {
    headerTab: () => import('@/components/header')
  }
}

頁面請求截圖：

4) 最后平時的項目中該如何選

• 當路由頁面和路由頁面找中的組件全使用懶加載時： 項目最大化的實現了按需加載，但一個頁面嵌入多個組件時與此同時將帶來過多的http請求，可能造成網頁顯示過慢且渲染參差不齊的問題。
• 路由頁面懶加載，路由頁面中的使用較為頻繁的組件使用懶加載： 合理滿足按需加載的情況下，又相應減少了http請求。但在團隊開發合作中，需要將按需加載的組件和非按需加載的組件做好划分，達到更好的維護。

參考資料:

1) https://www.cnblogs.com/zhanyishu/p/6587571.html (vue2組件懶加載淺析)