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的语法。
到此这篇关于Vue实现路由懒加载的多种方式总结的文章就介绍到这了,更多相关Vue路由懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现经典选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue中如何删除字符串中的空格符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue 插槽简介及使用示例，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-11-11
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
为了快速体验 MVVM 模式，我选择了非工程化方式来起步，并选择使用 Vue.js，以及基于它构建的 iView UI 框架。本文给大家分享基于 Vue.js 之 iView UI 框架非工程化实践记录，需要的朋友参考下吧2017-11-11
这篇文章主要为大家学习介绍了Vue如何利用广度优先搜索实现watch（有意思），文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
这篇文章主要介绍了Vue绑定内联样式的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
本文主要主要讲述对threejs的一些api进行基本的封装，在vue3项目中来实现一个可视化的3d项目，包含了一些常用的功能，场景、灯光、摄像机初始化，模型、天空盒的加载，以及鼠标点击和悬浮的事件交互,感兴趣的朋友可以参考下2023-06-06
刚学vue时候对于全局组件和局部组件有点懵,不知道什么时候用全局,什么时候用局部,下面这篇文章主要给大家介绍了关于Vue组件如何自动按需引入的相关资料,需要的朋友可以参考下2021-12-12
Vue el-table表头上引入组件不能实时传参解决方法分析
这篇文章主要介绍了Vue el-table表头上引入组件不能实时传参解决方法，总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路2022-11-11
vue中使用echarts绘制双Y轴图表时刻度没有对齐的两种解决方法(最新方案)
这篇文章主要介绍了vue中使用echarts绘制双Y轴图表时，刻度没有对齐的两种解决方法,主要原因是因为刻度在显示时，分割段数不一样，导致左右的刻度线不一致，不能重合在一起，下面给大家分享解决方法，需要的朋友可以参考下2024-03-03
最新评论