一看就会之vue路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

介绍

支持webpack支持的懒加载方法有：

• 这种方法比较通用，而且支持性好

(resolve) => require(['./Foo'], resolve)

• 法是官方文档Vue Router 推荐的，如下

const Foo = () => import('./Foo')

注意：如果使用的是Babel，需要添加@babel/plugin-gsyntax-dynamic-import，才能使 Babel 可以正确的解析语法。

举个栗子：

懒加载之前 router/index.js 是这样写的：

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

import Home from 'pages/home'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'home', component: Home }
  ]
})

方式一使用懒加载

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

// 其它都不用变，就是这么简单
const Home = () => import('pages/home')

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'home', component: Home }
  ]
})

方式二使用懒加载

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

// 其它都不用变，就是这么简单
const Home = (resolve) => require(['pages/home'],resolve)

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'home', component: Home }
  ]
})

说明：

• 资源懒加载，被访问时才会被加载对应的js模块，而不是第一次加载所有资源
• 提高整个项目的加载性能