vue-router路由懒加载以及三种实现方式

什么是路由懒加载？

延迟加载或按需加载路由所对应的组件，而不是在应用初始化时就一次性加载所有组件。
路由懒加载做了什么事情？

•     主要作用是将路由对应的组件打包成一个个的js代码块
•     只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

即：只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

如何实现路由懒加载？

 vue项目实现路由按需加载（路由懒加载）的三种方式：

•      Vue异步组件
•      ES6标准语法import（） 常用
•      webpack的require，ensure()

Vue异步加载技术

   vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，一个组件会生成一个js文件。

   component: resolve => require(['放入需要加载的路由地址'], resolve)

  {
      path: '/problem',
      name: 'problem',
      component: resolve => require(['../pages/home/problemList'], resolve)
    }

ES6推荐方式imprort ()

•      直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化   成es5的语法。
•     推荐使用这种方式，但是注意wepack的版本>2.4
•     vue官方文档中使用的也是import实现路由懒加载

  上面声明导入，下面直接使用

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
    routes: [
        {
            path: '/Foo',
            name: 'Foo',
            component: Foo
        },
        {
            path: '/Aoo',
            name: 'Aoo',
            component: Aoo
        }
    ]
})

webpack提供的require.ensure()实现懒加载：

•    vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
•     这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
•     require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，        不会和主文件打包在一起。
•     第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
•     第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主      文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。
•    第三个参数是错误回调。
•    第四个参数是单独打包的chunk的文件名

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

import和require的比较（了解）

• import 是解构过程并且是编译时执行
• require 是赋值过程并且是运行时才执行，也就是异步加载
• require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量

相关文章👉   vue-router路由懒加载以及三种实现方式