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. SGU 185 Two shortest

    Two shortest Time Limit: 500ms Memory Limit: 4096KB This problem will be judged on SGU. Original ID: ...

  2. Mark一下:成为CSDN博客专家

    距第一篇博客(发表于2015.08.13)已有差不多7个月,还记得当时受一个基友的启发,觉得要总结写作些什么,于是磕磕碰碰写出第一篇博客,坚持写作至今,穿梭于CSDN.简书.知乎和作业部落等门户网站, ...

  3. Swift入门(四)——可选类型(Optionals)与断言(Assert)

    可选类型是什么? 首先看一个问题,Swift中String类型的变量有一个叫做toInt的方法,能够把String类型变量转换为Int类型变量. var stringValue = "5&q ...

  4. HDU 4893 线段树裸题

    Wow! Such Sequence! Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  5. 精美viso制图(1)

    office组件中的viso是一款十分强大的绘图工具,在绘制流程图.结构框图时显得十分方便,这里将我自己绘制的一些viso图(大部分都是用在我自己的论文中的)与大家分享一把. 1.深度学习训练流程图 ...

  6. phpStorm中ftp的配置与使用,支持配置多个

    小结:很方便,支持ftp功能和比较. 扩展,可以查看远程文件和日期 配置多个ftp

  7. 利用flashback transaction query新特性进行事务撤销

    具备了flashback version query查询的基础,我们就可以进行基于flashback version query的恢复.这就是flashback transaction query.f ...

  8. 基于QMP实现对qemu虚拟机进行交互

    本文详解QMP,包含qmp.hmp.qemu-guest-agent的介绍.工作原理.配置方法.范例 小慢哥的原创文章,欢迎转载 目录 ▪ QMP介绍 ▪ QMP语法 ▪ 单独使用qemu,启用QMP ...

  9. React实现单例组件

    问题背景 在工作中遇到了这样一个场景,写了个通用的弹窗组件,却在同一个页面中多次使用了该组件.当点击打开弹窗时,可想而知,一次性打开了多个弹窗,而业务需求只需要打开一个. 我个人在解决问题过程中的一些 ...

  10. jQuery应用实例3:鼠标经过显示离开隐藏

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...