vue-router路由懒加载的使用

目录

• 技术概述
• 技术详述
  • 步骤
• 技术使用中遇到的问题和解决过程
• 总结
• 参考文献

技术概述

当打包构建应用时，JavaScript包会变得非常大，影响页面加载。懒加载，是一种很好的优化网页或应用的方式。把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样加快了应用的初始加载速度，减轻了它的总体体积，使效率更高。

技术详述

我们之前看到的懒加载一般是这样的形式：

1. 浏览一个网页，准备往下拖动滚动条
2. 拖动一个占位图片到视窗
3. 占位图片被瞬间替换成最终的图片

我们可以在Medium中看到懒加载是如何使用的，网页首先用一张轻量级的图片占位，当占位图片被拖动到视窗，瞬间加载目标图片，然后替换占位图片。

步骤

首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Foo = () =>
Promise.resolve({
/* 组件定义对象 */
})

第二，在 Webpack 2 中，我们可以使用动态 import (opens new window)语法来定义代码分块点 (split point)：

import('./Foo.vue') // 返回 Promise

结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

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

在路由配置中什么都不需要改变，只需要像往常一样使用Foo：

const router = new VueRouter({
routes: [{ path: '/foo', component: Foo }]
})

技术使用中遇到的问题和解决过程

懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。当时我们的页面中有很多的组件和资源，加载速度比较慢，于是我们决定使用这项技术。

1、未用懒加载，vue中路由代码如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
    Vue.use(Router)
 export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })

2、vue异步组件实现懒加载
方法如下：component：resolve=>(require(['需要加载的路由的地址'])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
　　/* 注意 : 此处应省去之前导入的HelloWorld模块 */
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})

总结

觉得这个技术并不难学，主要要多动手实践，熟悉它的使用。

参考文献

路由懒加载
懒加载是如何实现的？
vue-router路由懒加载的使用