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