懒加载：----------------------------------------------------？

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

为什么需要懒加载？

　　　　像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基本操作 2.1 Linux网络相关概念和修改IP地址的方法2.2 关闭防火墙并设置开机开不启动2.3 临时和永久关闭Selinux2.4 设置系统光盘开机自动挂载2.5 配置本地 ...

  2. centos7下安装docker（15.2跨主机网络-overlay）

    为支持容器跨主机通信,Docker提供了overlay driver,使用户可以创建基于VxLAN的overlay网络.VxLAN可将二层数据封装到UDP进行传输,VxLAN提供与VLAN相同的以太网 ...

  3. [CQOI2018]九连环

    嘟嘟嘟 对于这种找规律的题,我向来是不会的. 通过大佬们的各种打表找规律.神奇dp等方法,我们得到了答案就是\(\lfloor \frac{2 ^ {n + 1}}{3} \rfloor\). 高精是 ...

  4. （1） 安卓导入mqtt包基本通信

    参考资料:http://blog.csdn.net/qq_17250009/article/details/52774472 MQTT官网:http://mqtt.org/ MQTT介绍:http:/ ...

  5. GDB 命令回顾

    0) 为使用 GDB, 编译时需要加入调试信息 -g 选项,例如, $ gcc -g test.c -o test 1) 使用 GDB 开始调试 $ gdb test 也可以, $ gdb $ fil ...

  6. Error: Cannot find module 'babel-runtime/regenerator'

    在做调用阿里云短信接口时遇到的一个问题 错误原因:没有正确安装相应的mmodule 解决办法: 第一步:在package.json中加入依赖label-runtime 第二步:在Terminal中 n ...

  7. 根据成绩输出对应的等级(使用if多分支和switch语句分别实现)

    根据成绩输出对应的等级,使用if多分支和switch语句分别实现. a)        A级   [90,100] b)        B级   [80,90) c)        C级   [70, ...

  8. ind2sub

    ind2sub 线性索引的下标 语法 [I,J] = ind2sub(siz,IND)[I1,I2,I3,...,In] = ind2sub(siz,IND)   说明 ind2sub 函数确定与数组 ...

  9. Generative Adversarial Nets[pix2pix]

    本文来自<Image-to-Image Translation with Conditional Adversarial Networks>,是Phillip Isola与朱俊彦等人的作品 ...

  10. Maven项目pom.xml文件简单解析

    Maven项目pom.xml简单解析 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...