vue路由懶加載,組件按需加載

“懶加載也叫延遲加載，即在需要的時候進行加載，隨用隨載。在單頁應用中，如果沒有應用懶加載，運用webpack打包後的文件將會異常的大，造成進入首頁時，需要加載的內容過多，延時過長，不利於用戶體驗，而運用懶加載則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時。”

• 路由懶加載
  原路由配置：

  import Vue from "vue";
  import Router from "vue-router";
  import FansData from './views/FansData';
  import InviteInGroup from "./views/InviteInGroup";
  
  Vue.use(Router);
  export default new Router({
  	mode: "history",
  	routes: [
  		{
    			path: "/fans",
    			name: "FansData",
    			component: FansData
  		},
  		{
    			path: "/fans/invite",
    			name: "InviteInGroup",
    			component: InviteInGroup
  		}
  	]
  });
  
  

打包後的js文件中只有：app.js

按需加載：

• 方法一： vue通過異步組件實現懶加載，方法如下：
  component：resolve=>(require(['需要加載的路由的地址'])，resolve)

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
  mode: "history",
  routes: [
    {
      path: "/fans",
      name: "FansData",
      component: resolve => require(["./views/FansData"], resolve)
    },
    {
      path: "/fans/invite",
      name: "InviteInGroup",
      component: resolve => require(["./views/InviteInGroup"], resolve)
    }
  ]
});

在/fans頁面中network中：

從圖上看，加載了一個路由時，只打包了一個文件
訪問/fans/invite時：

• 方法二：ES 的import方法，方法如下：
  const HelloWorld = （）=>import('需要加載的模塊地址')(可指定打包後的文件名)

import Vue from "vue";
import Router from "vue-router";
const FansData = () =>
  import(/* webpackChunkName: "FansData"  */ "./views/FansData");
const InviteInGroup = () =>
  import(/* webpackChunkName: "IntiveInGroup"  */ "./views/InviteInGroup");

Vue.use(Router);
export default new Router({
  mode: "history",
  routes: [
    {
      path: "/fans",
      name: "FansData",
      component: FansData
    },
    {
      path: "/fans/invite",
      name: "InviteInGroup",
      component: InviteInGroup
    }
  ]
});

在/fans頁面中network中：

訪問/fans/invite時：

• webpack提供的require.ensure

  import Vue from "vue";
  import Router from "vue-router";
  Vue.use(Router);
  export default new Router({
  	mode: "history",
  	routes: [
  		{
    			path: "/fans",
    			name: "FansData",
  	     	component: r =>
      		require.ensure([], () => r(require("./views/FansData")), "fansData")
  		},
  		{
    			path: "/fans/invite",
    			name: "InviteInGroup",
    			component: r =>
      		require.ensure([],() => r(require("./views/InviteInGroup")),"inviteInGroup")
  		}
  	]
  });
  
  

按需加載會在頁面第一次請求的時候，把相關路由組件塊的js添加上；非按需加載則會把所有的路由組件塊的js包打在一起。

參考文檔：

1. 路由懶加載
2. vue項目實現按需加載的3種方式