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种方式