vue项目中路由懒加载的三种方式

1 . vue异步组件技术 ==== 异步加载 

vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 

但是,这种情况下一个组件生成一个js文件

/* vue异步组件技术 */

{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },
{ path: '/index', name: 'Index', component: resolve => require(['@/components/index'],resolve) },
{ path: '/about', name: 'about', component: resolve => require(['@/components/about'],resolve) }

2.组件懒加载方案二 路由懒加载(使用import)

const 组件名=() => import('组件路径');
// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about'){ path: '/about', component: About }, { path: '/index', component: Index }, { path: '/home', component: Home }

3.webpack提供的require.ensure()  

vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。 
这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
/* 组件懒加载方案三: webpack提供的require.ensure() */
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },
{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') },
{ path: '/about', name: 'about', component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') }// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({routes: [{path: '/list/blog',component: list,name: 'blog'}]
})

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/651403.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于java+jsp+ssh的毕业生就业信息管理系统

🍅文末获取源码联系🍅 👇🏻 精彩项目推荐订阅👇🏻 不然下次找不到哟 感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮…

ShardingSphere之ShardingJDBC客户端分库分表下

目录 ShardingJDBC实战 STANDARD标准分片策略 COMPLEX_INLINE复杂分片策略 CLASS_BASED自定义分片策略 HINT_INLINE强制分片策略 ShardingJDBC实战 上篇已经将需要用到的类、数据库表都准备好了,本篇主要介绍分片配置文件。 STANDARD标准分片策略 如果按照上篇文…

golang版本使用令牌桶算法来实现限流的策略

代码 package mainimport ("fmt""sync""time" )// 令牌桶结构体 type TokenBucket struct {tokens chan struct{}rate time.Duration// 桶容量limit int }// 创建令牌桶 func NewTokenBucket(rate time.Duration, limit int) *TokenBucket {r…

纳斯达克户外大屏背景配什么颜色效果最好-大舍传媒

纳斯达克户外大屏背景配什么颜色效果最好 引言 纳斯达克大屏是世界闻名的户外广告媒体之一,通过高清大屏呈现的广告内容吸引了众多目光。大舍传媒作为纳斯达克大屏的提供商和运营商之一,致力于创造最佳的视觉效果来吸引观众的注意力。在纳斯达克大屏投…

C语言“++”和“--”运算符需要注意些什么?

一、问题 “”和“--”运算符经常被应⽤,使⽤这两种运算符需要注意些什么? 二、解答 在使用C语言中的自增()和自减(--)运算符时,需要注意以下几点: 1、运算规则 运算符有两种形式&…

cs2系统提升思路

思路/战术 > 道具 > 练枪 思路/战术 通用的思路 > 针对性学习每一张图的思路 注意,休闲中人数较多,战术的体现不多,不要休闲打习惯了适应不了竞技 地图理解 / 分析 根据地形分析攻防 (比如dust2,所有道路…

HCIA学习作业四

要求: 1、AR3还回为3.3.3.0/24 2、其他基于192.168.1.0/24进行合理划分 3、AR1和AR2均存在两个环回 4、整个网络运行RIP v2 但是不能直接宣告AR3的环回 5、全网可达,保障更新安全,尽量减少路由条目,避免环路 拓扑图&#xf…

EXP脚本编写

EXP脚本的编写与POC脚本编写一样,只需要修改_attack部分,替换成漏洞 利用的脚本即可。要利用Flask漏洞,需要用到Python的特性。关于如何在Jinja2模 板中执行Python代码,官方给出的方法是在模板环境中注册函数就可以进行调 用。 J…

java servlet运输公司管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web运输公司管理系统是一套完善的java web信息管理系统 serlvetdaobean mvc 模式开发 ,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主 要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5…

Multi-label classification复现

摘要 存在 theoretical results show that SA and HL are conflicting measures 1 介绍 an algorithm usually performs well on some measures while poorly on others.There are a few works studying the behavior of various measures.Although they provide valuable i…

【网站项目】基于SSM的246品牌手机销售信息系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

多路复用简述

1、概念 多路复用是一种计算机编程和通信领域的技术,用于有效地处理多个输入/输出任务或连接,提高系统的性能和响应性。它的主要目的是在一个单一的线程或进程中同时处理多个任务,而不是为每个任务创建一个独立的线程或进程。 在网络编程中,多路复用通常通过以下几种机制来…

cmake工具的安装

1、简介 CMake 是一个开源的、跨平台的自动化建构系统。它用配置文件控制编译过程的方式和Unix的make相似,只是CMake并不依赖特定的编译器。CMake并不直接建构出最终的软件,而是产生标准的建构文件(如 Unix 的 Makefile 或 Windows Visual C …

自述20年的痛:一个读书人的知识与自恋,自古文人多清高

自述20年的痛:一个读书人的知识与自恋,自古文人多清高 20年读书的痛:你就是书读太多了,想法太多了,没必要20年读错了书:这些知识没有帮助我培养竞争力,而只是增强了我的自恋 20年读书的痛&#…

常见命令及参数

目录 rpm yum rpm rpm是基本的管理软件的指令。用于互联网下载包的打包及安装工具,它包含在某些Linux分发版中。它生成具有.RPM扩展名的文件。 安装软件:rpm –ivh filename.rpm 升级软件:rpm –Uvh filename.rpm 卸载软件&#xff1a…

使用Apache POI 创建和读取excel表

目录 1. Apache POI 中文使用手册 1.1 Apache POI 项目介绍 1.2 处理组件 1.2.1 Excel 文件处理组件 1.2.2 Word 文件处理组件 1.2.3 PPT 文件处理组件 1.2.4 文档属性组件 1.2.5 Visio 文件处理组件 1.2.6 Microsoft Publisher 98(-2007)文件处…

kotlin data clas 数据类

data class 介绍 kotlin 中 data class 是一种持有数据的特殊类 编译器自动从主构造函数中声明的所有属性导出以下成员: .equals()/.hashCode() 对 .toString() 格式是 "User(nameJohn, age42)" .componentN() 函数 按声明顺序对应于所有属性。…

mac配置L2TP连接公司内网

1. 打开系统设置 2. 打开网络 3. 点击网络页面其他服务右下角三个点,添加VPN配置中的L2TP 4. 配置VPN,服务器填写公司的服务器ip,共享密钥没有可以随便填写 5. 打开终端编辑文件 sudo vim /etc/ppp/opt…

机电制造ERP软件有哪些品牌?哪家的机电制造ERP系统比较好

机电制造过程比较复杂,涵盖零配件、采购、图纸设计、工艺派工、生产计划、物料需求计划、委外加工等诸多环节。而供应链涉及供应商的选择、材料采购价格波动分析、材料交货、品质检验等过程,其中某个环节出现问题都可能会影响产品交期和经营效益。 近些…

在Vue的模块开发中使用GPT的体验及总结

我这一周都在忙着实现一个页面,这个页面是通过vue基于element-ui来实现的。在这个过程中,我把页面拆分成多个组件,而组件的生成是通过Chat-GPT3来实现的。 这又是一次使用AI来协同开发的体验,觉得有必要总结一下: 遵循…