vue懒加载 路由 router 的编写(resolve)
如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。
当你用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js。
你可以打包的时候看看目录结构就明白了。
正文
我先用控制台创建了vue项目demo(如何创建可以参考我之前的写的笔记 http://www.cnblogs.com/atjinna/p/6723293.html)。由于单页面开发,会出现打包后的JavaScript包非常大,这会影响页面加载速度,那我们可以考虑使用懒加载去优化这个问题,因此
resolve出现了。具体参考下面:
1、引入 vue-router(由于使用的是控制台创建的项目,并且使用了webpack这个模板,所以可以省略这一步)
2、定义 component 指定变量
1)、先看下目录
2)、component 指定变量
3、path路径注意点:
参数名、页面路径、以及懒加载
补充
我将整个router展示给大家看吧,这个其实是我上面提到的demo那个项目的代码
还在研究中,所以写得很青涩,也没有解释为何如此用,大家可以参考下文档吧 https://router.vuejs.org/zh-cn/api/options.html#routes 以及另一份文档https://cn.vuejs.org/v2/guide/ 。哦,对了,我用的都是vue2,也建议大家使用vue2.
vue懒加载 路由 router 的编写(resolve)的更多相关文章
- vue懒加载
vue懒加载(白屏或者加载慢的解决方法) 懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异 ...
- 关于Vue懒加载问题
有关Vue懒加载其实并不是想象的那么难和复杂: 首先引入 import VueLazyLoad from 'vue-lazyload'; 其次是使用 Vue.use(VueLazyLoad,{ er ...
- 使用Webpack的代码分离实现Vue懒加载(译文)
当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...
- 使用Webpack的代码分离实现Vue懒加载
当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...
- angular配置懒加载路由的思路
前言 本人记性不好,对于别人很容易记住的事情,我愣是记不住,所以还是靠烂笔头来帮我长长记性. 参考文章:https://blog.csdn.net/xif3681/article/details/84 ...
- vue懒加载 && 浏览器高度
当我们进入首页时,可能有很多条目需要显示,但是如果条目太多,我们全部将之显示出来就会造成性能的消耗,比如,我在第一条就找到了需要的或者我就看前面两条我就不想看后面的了,所以,这时候如果使用全部加载的方 ...
- vue-lazyload 的vue 懒加载的使用
vue-lazyload vue 图片懒加载的使用 下载 vue-lazyload npm i vue-lazyload -S 使用 vue-lazyload 在 src 下面的 main.js 的文 ...
- vue懒加载实现
- vue路由懒加载及组件懒加载
一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...
随机推荐
- koa的跨域访问
koa跨域访问:1.安装插件 npm install koa-cors --save-dev2.项目的app.js中var cors = require('koa-cors'); app.use(co ...
- Python01 python入门介绍
1 python简介 1.1 为什么学python python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van ...
- 【摘自张宴的"实战:Nginx"】try_files指令
语法:try_files param1 [param2...paramN] fallback 默认值:none 使用环境: location 该指令用于告诉nginx测试每个文件是否存在,并且使用首先 ...
- 算法Sedgewick第四版-第1章基础-005一封装输入(可以文件,jar包里的文件或网址)
1. package algorithms.util; /*********************************************************************** ...
- Luogu 2114 [NOI2014]起床困难综合症
还挺简单的. 发现这几个二进制运算并不会进位,所以我们从高到低按位贪心,一位一位计算贡献. 发现$2^{30}$刚好大于$1e9$,所以最多只要算29位. 首先算出一个全都是$0$的二进制数和一个全都 ...
- fibnacci数列的两种实现(递归实现和循环实现)
//一切尽在规律中,认真观察,你会明白更多... using System;using System.Collections.Generic;using System.Linq;using Syste ...
- Swing窗口Linux下不支持最大化问题
Swing窗口Linux下不支持最大化问题 摘自:https://www.linuxidc.com/Linux/2009-06/20519.htm [日期:2009-06-17] 来源:www.qua ...
- JavaWeb_反射
一个类有多个组成部分,例如:成员变量,方法,构造方法等.反射就是加载类,并解剖出类的各个组成部分. 编程时什么情况下才需要加载类,并解剖出累的各个组成部分呢? 反射是用来做框架的. 从配置文件中解读类 ...
- wifi下远程连接Android设备方法
问题描述: android开发真机调试过程中,我们总是会重复卸载.安装这两个过程进行调试,通常都是用数据线连接电脑,能否摆脱数据线呢? 无线调试: 前提条件,电脑和手机必须处于同一局域网. 1.手机通 ...
- officeaddin开发->excel,word另存为html,xml,csv,txt设置编码格式
在excel中设置保存之后的编码格式,需要获取到Microsoft.Office.Interop.Excel.Workbook然后设置其中的webOpetions的编码格式就可以了. workbook ...