vue router路由的懒加载

最新推荐文章于 2021-03-16 20:02:42 发布
最新推荐文章于 2021-03-16 20:02:42 发布
阅读量62 收藏
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46054543/article/details/114795165
版权

当打包构建应用时，JavaScript包会变得非常大，影响页面加载效率
如果我们将不同的路由对应的组件分装成不同的代码块，然后当路由被访问的时候才加载对应组件，那么我们的请求效率就会高很多。
简单来说，懒加载就是按需服务。
用到的时候再请求资源，没有用到的时候就放在服务器不请求。

代码对比如下：

- 普通请求方式写法

在这里插入图片描述

- 懒加载写法

在这里插入图片描述
懒加载不同方式
在这里插入图片描述

产品迪
关注
专栏目录
vue-router路由懒加载的实现（解决vue项目首次加载慢）
12-11
在Web应用程序中，系统的瓶颈常在于系统的响应...像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loa
vue2笔记 — vue-router路由懒加载的实现
12-09
在Vue.js开发的单页面应用（SPA）中，Vue Router 提供了路由懒加载的功能，以解决由于大型项目导致的打包文件过大的问题。 Vue Router 是 Vue.js 的官方路由库，用于管理SPA中的各个视图组件。在默认情况下，所有...
vue-router懒加载速度缓慢问题及解决方法
10-17
Vue-router作为Vue.js的核心插件，用于构建单页面应用（SPA），其路由懒加载技术是Vue.js开发中经常会用到的优化手段。本文将详细介绍Vue-router中懒加载速度缓慢问题及其解决方案。 首先，需要理解什么是懒加载。...
Vue Router的懒加载路径的解决方法
12-10
const router = new VueRouter({ routes: [ { path: '/a', component: A } ] }); ``` 这样，当用户访问'/a'路径时，才会加载并渲染'A'组件。 为了更好地控制代码分割，我们可以使用`webpackChunkName`注释来...
如何获取body和html元素？
46054543的博客
11-01 5738
如何获取body和html元素？ body和html元素的获取方式与普通元素不同 代码如下（示例）： var myBody = document.body; console.log(myBody); var myHtml = document.documentElement; console.log(myHtml); ...
window.onload 方法的作用
46054543的博客
11-01 4661
window.onload的作用 我们看一下html的格式（如下）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> 通常我们的js可以写在head或者body标签里，因为程序是先执行body标签里面的代码的，如果写到
Vue如何给组件里面的路径起别名及引用？
46054543的博客
03-16 1339
一般的src查找路径都需要用到"…/"等，若文件夹很多层级很深的话容易出错。 因此可以起个别名方便查找。 首先在工程目录中找到build文件，在其中找到webpack.base.conf.js文件 找到resolve：里面这段代码，里面已经默认“@”为“src”的别名，按截图中的方式就可以自己给需要的文件起别名。 需要注意的是，在组件里面引用的时候，因为组件不是import导入的，所以需要在最前面加上“~”才生效 ...
vue开发之关闭代码规范
46054543的博客
03-13 1265
如果不喜欢vue里面的代码规范可以手动进行关闭， 操作如下： 找到config文件夹 → index.js文件 → 将useEslint的值改成false 即可
密码格式验证案例
46054543的博客
11-03 1038
密码格式验证案例： 先看效果图： 核心思路如下： 一、失去焦点方法 myinput.onblur = function () { //方法体 } 二、利用HTML DOM className 属性，在CSS样式里定义提示、正确、错误的三个样式类 核心代码如下： <script> //获取类元素 var myinput = document.querySelector('.ipt'); var mytips = document.querySelect
BOM之Location属性（对象）之页面跳转的实现
46054543的博客
11-21 924
本次案例将实现 5秒后跳转页面效果： 先看效果图： 核心思路如下： location.href = ‘http://www.baidu.com’;跳转页面核心代码 定义一个跳转页面的方法，若时间大于5则减减，并实时更新div里面的内容。若等于0则跳转。 添加按钮监听事件，用setInterval定时器函数记时间，一秒调用一次。 全部代码如下： <body> <button>点击跳转页面</button> <div>跳转时间提示</d
JS时间与日期对象
46054543的博客
11-01 838
显示当前系统的日期时间 html部分 定义一个按钮和一个盒子 按钮用来点击 盒子用来显示时间 <button>点击显示时间</button> <div>时间框</div> 效果图如下所示： js部分代码如下： <script> //获取元素 var btn = document.querySelector("button"); var div = docum
简易验证码校验
46054543的博客
11-07 812
案例： 先看效果图： 核心思路如下： 一、 二、 scirpt核心代码如下： HTML结构代码如下： CSS样式代码如下：
倒计时的实现之设置定时器与清除定时器
46054543的博客
11-20 760
定时器的清除和设置： 先看效果图： 核心思路如下： 获取到所有单位的时间，赋值到盒子的内容 设定一个空对象setter 作全局变量（方便监听事件调用） 结构代码如下： <div class="box"> <button class="start">开始倒计时</button> <span class="days">99</span> 天 <span class="hours"&gt
手动配置vue-router路由
46054543的博客
03-16 735
首先终端输入创建路由指令： 创建router文件夹，并在该文件夹中创建index.js文件 安装插件 → 创建路由对象 → 导出router 在main.js中导入router 还需要在App.vue里面添加router-view占位，否则组件将无法显示 然后还需要在index.js中配置映射关系 ...
全选全不选案例
46054543的博客
11-07 632
全选框案例： 先看效果图： 核心思路如下： 全选点击事件： 单选checked状态跟随全选 单选for循环点击事件： 默认flag = ture；只要有一个按钮没选中，flag = false 即 全选框就不勾选 scirpt核心代码如下： //全选点击事件，单选跟随全选 allCheck.onclick = function () { for (var i = 0; i < oneChecks.length; i++) {
节点操作之简易留言板案例
46054543的博客
11-07 597
案例： 先看效果图： 核心思路如下： 一、 二、 scirpt核心代码如下： HTML结构代码如下： CSS样式代码如下：
创建实例两种方法
46054543的博客
03-13 580
new Vue({ el:'#app', render: function (h) { return h(App) } }) new Vue({ render: function (h) { return h(App) } }).$mount('#app') 以上两种写法效果等同。差别在于后者内部多了条判断代码，最后执行效果相同 ...
Vue学习之hush模式与history模式
46054543的博客
03-16 517
系统默认的模式是hush模式，在该模式中页面跳转返回之后不会保存原来的页面，而history则是在页面返回后还是会回到原来的页面，这是两种模式的区别 下面是如果修改：将前面的代码中加入mode：‘history’ 即可实现 ...
如何阻止事件冒泡（事件对象方法）
46054543的博客
11-20 494
阻止事件冒泡： 先看效果图： 核心思路如下： scirpt核心代码如下： 全部代码如下：
vuerouter路由懒加载
最新发布
08-13
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` 在上面的示例中，`import`语句使用了注释`/* webpackChunkName: "home" */`来指定生成的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值