vue懒加载(白屏或者加载慢的解决方法)
懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载。
为什么需要懒加载?
  像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时
 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!
如何实现?懒加载写法:
非懒加载的路由配置:
还有一点:是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误其实是打包时候路径配置有点问题修改下就好了
找到build下面的webpack.prod.conf.js   添加   publicPath:"./",

vue懒加载的更多相关文章

  1. 关于Vue懒加载问题

    有关Vue懒加载其实并不是想象的那么难和复杂: 首先引入 import  VueLazyLoad from 'vue-lazyload'; 其次是使用 Vue.use(VueLazyLoad,{ er ...

  2. vue懒加载 && 浏览器高度

    当我们进入首页时,可能有很多条目需要显示,但是如果条目太多,我们全部将之显示出来就会造成性能的消耗,比如,我在第一条就找到了需要的或者我就看前面两条我就不想看后面的了,所以,这时候如果使用全部加载的方 ...

  3. vue懒加载 路由 router 的编写(resolve)

    如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长.当你用require这种方式引入的时候,会将你的comp ...

  4. vue-lazyload 的vue 懒加载的使用

    vue-lazyload vue 图片懒加载的使用 下载 vue-lazyload npm i vue-lazyload -S 使用 vue-lazyload 在 src 下面的 main.js 的文 ...

  5. 使用Webpack的代码分离实现Vue懒加载(译文)

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  6. 使用Webpack的代码分离实现Vue懒加载

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  7. vue懒加载实现

  8. vue 路由懒加载 使用,优化对比

    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...

  9. Vue小技巧-懒加载

    Vue懒加载包括图片懒加载与路由懒加载 1.图片懒加载: 首先安装 vue-lazyload包 然后导入并加载事先下载好的加载图片 import VueLazyLoad from 'vue-lazyl ...

随机推荐

  1. 《黑白团团队》第八次团队作业:Alpha冲刺 第五天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第五天 日期:2019/6/19 成员 ...

  2. web.xml 中context-param元素

    context-param元素含有一对参数名和参数值,用作应用的ServletContext上下文初始化参数.参数名在整个Web应用中必须是惟一的 param-name 子元素包含有参数名,而para ...

  3. 洛谷——P1802 5倍经验日

    https://www.luogu.org/problem/show?pid=1802#sub 题目背景 现在乐斗有活动了!每打一个人可以获得5倍经验!absi2011却无奈的看着那一些比他等级高的好 ...

  4. CF47A Triangular numbers

    CF47A Triangular numbers 题意翻译 给定一个数n,问你是否存在一个整数i,满足i*(i+1)/2=n. 若存在,输出"YES",否则输出"NO&q ...

  5. [using_microsoft_infopath_2010]Chapter 14高级话题

    本章提要: 1.剖析表单逻辑 2.从多个表单中合并数据 3.重新连接XML表单到XSN模板文件 4.在repeating table中设置默认值 5.离线填写表单的权衡

  6. gitlab一键安装 笔记

    0 简单介绍bitnami和gitlab bitnami BitNami是一个开源项目,该项目产生的开源软件包安装 Web应用程序和解决方式堆栈.以及虚拟设备. bitnami主办Bitrock公司成 ...

  7. 多线程编程TSL相关的技术文档

    线程本地存储 (TLS) https://msdn.microsoft.com/zh-cn/library/6yh4a9k1(v=vs.80).aspx Using Thread Local Stor ...

  8. UVA - 12230 Crossing Rivers 概率期望

    You live in a village but work in another village. You decided to follow the straight path between y ...

  9. Ruby学习笔记(二)——从管道读取数据

    在对文件名修改后,今天又给自己出了新的难题,想从实验结果中提取数据,并将其作为文件夹的名称.其中,比赛的主办方提供的评估算法是用perl写的,因此读取实验结果最为简单的想法自然是使用管道命令,即 ./ ...

  10. UESTC--1265--宝贵资源(简单数学)

    宝贵资源 Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit Status Des ...