vue-router路由懒加载(解决vue项目首次加载慢)
懒加载:----------------------------------------------------?
也叫延迟加载,即在需要的时候进行加载,随用随载。
为什么需要懒加载?
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时
简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!
如何实现?
路由懒加载写法一:

路由懒加载写法二:

非懒加载的路由配置:

还有一点:是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误其实是打包时候路径配置有点问题修改下就好了

找到build下面的webpack.prod.conf.js 添加 publicPath:"./",
vue-router路由懒加载(解决vue项目首次加载慢)的更多相关文章
- Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue Router的懒加载路径
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...
- vue的路由懒加载
路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...
- vue项目首次加载过慢
vue项目优化 浅谈 Vue 项目优化 关于vue在app首次加载缓慢的解决办法 nginx开启缓存 在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名 ...
- vue router路由(三)
当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
随机推荐
- WiFi-ESP8266入门http(1)-建立服务器,直接发送网
#include <ESP8266WiFi.h> /*** 该工程可以在2.4.0版本esp8266库中运行,没在更高版本库中进行测试 ***/ const char *ssid = &q ...
- 初学Python——函数
一.函数定义 def name( parameters): #没有参数括号内可以为空 "函数描述" #其实就是注释 <代码块> return [expression] ...
- Oracle 关于expdp和impdp的应用实践
现在有一个场景需求,需要把在一台服务器上某个用户的对象全部迁移到另一台服务器.有以下几个情况: 1.原用户下的表分属于不同的表空间(由于维护人员在过程中修改过用户的默认表空间) 2.原用户的数据库量过 ...
- 从零开始搭建django前后端分离项目 系列一(技术选型)
前言 最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析.报表数据查询.GIS地理化展示.任务监控管理.由于页面功能较复杂,所以 ...
- Java性能优化之String字符串优化
字符串是软件开发中最重要的对象之一.通常,字符串对象在内存中是占据了最大的空间块,因此如何高效地处理字符串,必将是提高整体性能的关键所在. 1.字符串对象及其特点 Java中八大基本数据类型没有Str ...
- Python从菜鸟到高手(7):字符串
1. 单引号字符串和转义符 字符串与数字一样,都是值,可以直接使用,在Python控制台中直接输入字符串,如"Hello World",会按原样输出该字符串,只不过用单引号括了 ...
- Python股票分析系列——数据整理和绘制.p2
该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第2部分. 在本教程中,我们将利用我们的股票数据进一步分解一些基本的数据操作和可视化. 我们将要 ...
- flask异常处理
对于异常,通常可以分为两类:一类是可以预知的异常,我们通常会用try...except....捕捉,第二类是未知的error,我们是无法预知的. try: code block except A: e ...
- Python_迭代器_35
迭代器 # l = [1,2,3]# 索引# 循环 for# for i in l:# i## for k in dic:# pass #可以被for循环的# list# dic# str# set# ...
- H5 字符实体
41-字符实体 (greater than) © 版权符号 --> 我 爱你 到此为止我们的HTML的基础标签就学习完毕了, 例如我们学习了<h1>标签, <table&g ...