懒加载:----------------------------------------------------?

    也叫延迟加载,即在需要的时候进行加载,随用随载。

为什么需要懒加载?

    像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

    简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!

如何实现?

  路由懒加载写法一:

  路由懒加载写法二:

  非懒加载的路由配置:

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

找到build下面的webpack.prod.conf.js   添加   publicPath:"./",

vue-router路由懒加载(解决vue项目首次加载慢)的更多相关文章

  1. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  2. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  3. Vue Router的懒加载路径

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...

  4. vue的路由懒加载

    路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...

  5. vue项目首次加载过慢

    vue项目优化 浅谈 Vue 项目优化 关于vue在app首次加载缓慢的解决办法 nginx开启缓存 在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名 ...

  6. vue router路由(三)

    当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...

  7. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  8. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  9. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

随机推荐

  1. linux 软连接创建 压缩解压缩 linux的dns服务相关

    linux软连接创建 注意用绝对路径,语法如下 ln -s 目标文件绝对路径 软连接名字绝对路径 ln -s /小护士.txt /tmp/hs.txt 修改linux的PS1变量,命令提示符变量 PS ...

  2. docker学习笔记(四)-持久化数据,安装docker-compose

    Docker 持久化数据 实战 compose 安装docker-compose

  3. Leetcode:0002(两数之和)

    LeetCode:0002(两数之和) 题目描述:给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表.你可以假设除了数字 0 之外,这两 ...

  4. 【js】统计数组中某些项的个数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. pyspider环境部署2--pyspider安装

    接上篇文章,在python3.6.4安装完成的基础上,安装相关依赖模块及pyspider. 依赖安装 1.setuptools和pip setuptools和pip是python的包管理工具,pyth ...

  6. 环境配置 jupyter代码自动补全

    自动补全 参考链接: https://www.lefer.cn/posts/15473/

  7. Redis学习之字典源码分析

    字典,又叫映射,是一种用于保存键值对的抽象数据结构 划重点:抽象数据结构 Redisd字典使用哈希表作为底层实现,一个哈希表里面可以有多个哈希表结点,而每个哈希表结点就保存了字典中的一个键值对 一.哈 ...

  8. 如何添加一种新Case协议

    这里以添加基础http为例 首先要在脚本文件(XML文件)中定义好这种协议的基本信息     您必须在这里设计好您协议预先需要的数据(比如串口协议,那波特率,串口号等可能是不会经常改变的就可以在这里先 ...

  9. 从一个例子入门Mysql储存过程

    例子 -- 秒杀执行存储过程 DELIMITER $$ -- 将分隔符; 转换为 $$ -- 定义存储过程 -- 参数: in 输入参数; out 输出参数 -- row_count():返回上一条修 ...

  10. disruptor 高性能之道

    disruptor是一个高性能的线程间异步通信的框架,即在同一个JVM进程中的多线程间消息传递.应用disruptor知名项目有如下的一些:Storm, Camel, Log4j2,还有目前的美团点评 ...