vue-router 路由懶加載

webpack打包會將全部資源文件合併壓縮成一個文件，致使最終的文件很是大，甚至超過幾M，以至頁面首次加載會比較慢，以下圖：

其中紅色標出的是在瀏覽器中加載的js文件，gzip壓縮前已經達到500多KB了。

再看看路由按需加載後：

文件被拆成一個個小的文件，即webpack的文件分割。這裏是以頁面爲單位進行切割。具體實現以下：

一般狀況下，咱們引入vue文件的方式是

import RankList from ‘@/components/RankList’

而後在router裏面配置

{
      path: '/rank-list',
      name: 'RankList',
      meta: {
        title: '排行榜'
      },
      component: RankList
}

按需加載只須要修改vue文件的引入方式：

const RankList = () => import( /* webpackChunkName: "RankList" */ '@/components/RankList')

/* webpackChunkName: "RankList" */  是打包後文件名稱，後面是文件路徑。

'@/components/RankList'  是文件路徑。

在build目錄下找到webpack.prod.conf.js文件，將output修改成

 output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),//文件格式，文件名.文件哈希
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')//文件切割後的文件名稱。這裏的name對應的就是路由中引入文件時候的webpackChunkName

}

 

具體可參考官網：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html