「Vue.js」Vue-Router + Webpack 路由懒加载实现

一.前言

当打包构建应用时，Javascript 包会变得很是大，影响页面加载。若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载.

1. Vue 的异步组件
2. webpack代码分割

建议首先熟读这两个知识点，会更容易理解懒加载的原理。本文的源码地址在-->lazyLoad，若是对你有帮助，欢迎star(・ε・●)

二.实战

话很少说，咱们来一步步实践一下路由懒加载的过程
1.建立一个文件夹，目录结构大体以下

2.建立两个简单的组件，做为切换组件时展现，代码很简单

<template>
    <div>
        <h4>This is About Page</h4>
    </div>
</template>
<script>
export default {
    name:  'about'
}
</script>

3.重点是route的配置，没有用到路由懒加载时，咱们通常是这样配置的：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

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

路由懒加载中咱们要用到异步组件，因此改成这样配置：

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

Vue.use(Router)

function loadView(view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

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

除了上面用到的import()引入组件，咱们还可使用webpack特有的require.ensure()

const Baz = r => require.ensure([], ()=>r(require('./Baz.vue')), '/baz')

将其余的文件配置完成后，咱们就能够在浏览器中看到懒加载的效果了，即只有当路由匹配成功时，才会加载相应的组件，并且加载一次后会将它缓存，下次再访问这个路由，不会从新加载。

3、结语

感谢你阅读个人文章，如对你有帮助，欢迎点赞收藏。若有错误，欢迎指正。最后，十分建议你们跟着实现一遍，源码地址在lazyLoad。