Vue实现路由懒加载的几种方式

一、为什么需要路由懒加载

vue在项目打包/构建(一般是npm run build 具体看package.json文件)之后，会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件，这里主要存放的是整个项目的业务逻辑代码。随着项目不断的开发迭代，业务逻辑越来越多，app.js文件也会越来越大。在线上就会容易出现进入首页时所需时间过长或者出现白屏的问题

这会是影响加载时间的重要因数。当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率解决白屏问题。下面是几种常见vue路由懒加载的方法

1.ES6推荐方式imprort ()----推荐使用

// 官网可知：下面没有指定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')

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

1：这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

2：require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件 打包在一起。

3：第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。

4：第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一 起，这样就生成了两个chunk,第一次加载时只加载主文件。

5：第三个参数是错误回调。

6：第四个参数是单独打包的chunk的文件名

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

3.使用vue异步组件resolve

这一种方法比较常见。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载，下面是代码示例

//const 组件名 = resolve => require([‘组件路径’],resolve)
//（这种情况下一个组件生成一个js文件）
const home = resolve => require(['../view/home'],resolve)

4.import和require的比较（了解）

import 是解构过程并且是编译时执行

require 是赋值过程并且是运行时才执行，也就是异步加载

require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量

命令

规范

调用

本质

特点

require

CommonJS规范

运行时调用

赋值过程

非语言层面的标准。 社区方案，提供了服务器/浏览器的模块加载方案。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。

import

es6+的语法标准

编译时调用

解构过程

语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定

关于规范

import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法。

标签 , ,

发表回复