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

------------------正常用法
// import Login from 'login/Login'
// import LoginView from 'login/index.vue'
// import SelectCountry from 'login/children/SelectCountry'
// import OpenView from 'login/open/Index.vue'
// import OpenViewTwo from 'login/open/Two.vue'
// import OpenViewThree from 'login/open/Three.vue'
// import OpenViewFour from 'login/open/Four.vue'
// import OpenViewFive from 'login/open/Five.vue'
// import OpenViewSix from 'login/open/Six.vue'
// import OpenViewSeven from 'login/open/Seven.vue' -------------------懒加载用法
const Login = r => require.ensure([], () => r(require('login/Login')), 'group-login')
const LoginView = r => require.ensure([], () => r(require('login/index')), 'group-login')
const SelectCountry = r => require.ensure([], () => r(require('login/children/SelectCountry')), 'group-login')
const OpenView = r => require.ensure([], () => r(require('login/open/Index.vue')), 'group-login')
const OpenViewTwo = r => require.ensure([], () => r(require('login/open/Two.vue')), 'group-login')
const OpenViewThree = r => require.ensure([], () => r(require('login/open/Three.vue')), 'group-login')
const OpenViewFour = r => require.ensure([], () => r(require('login/open/Four.vue')), 'group-login')
const OpenViewFive = r => require.ensure([], () => r(require('login/open/Five.vue')), 'group-login')
const OpenViewSix = r => require.ensure([], () => r(require('login/open/Six.vue')), 'group-login')
const OpenViewSeven = r => require.ensure([], () => r(require('login/open/Seven.vue')), 'group-login')
 
小希项目 优化,路由模块懒加载,目前测试环境已部署,线上等待部署
项目页面加载对比
优化后页面加载图示:
优化后页面加载图示:
 
————————
页面finish时间  目前是对比中  优化前加载时长比优化后加载时长短,因为对比时,0.25测试服务器带宽慢,线上服务器带宽快    原因所导致,部署线上后,就正常了
————————​​
项目打包对比
优化后打包图示:
​​
优化前打包图示:
​​

vue 路由懒加载 使用,优化对比的更多相关文章

  1. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  2. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  3. vue 路由懒加载 resolve vue-router配置

    使用方法 component:resolve => require(['@/pages/About'],resolve) //"@"相当于".." 懒加载 ...

  4. vue路由懒加载

    大项目中,为了提高初始化页面的效率,路由一般使用懒加载模式,一共三种实现方式.(1)第一种写法: component: (resolve) => require(['@/components/O ...

  5. vue路由懒加载,babel-loader无法处理/使用 import

    使用vue-router懒加载,代码如下: 但是npm run dev 的时候 babel-loader报错如下: 查阅各种资料终于解决. 问题原因: 这种情况下的 import 属于异步引用组件,需 ...

  6. 两段代码实现vue路由懒加载

    const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', co ...

  7. vue路由懒加载方式

    方式一:结合Vue的异步组件和Webpack的代码分析 const Home = resole => {require.ensure(['../components/Home.vue'],() ...

  8. vue路由懒加载 及import

  9. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

随机推荐

  1. although 和 although 的区别

    作为连词的时候,although 和 though 是可以互换的.Although 一般被认为更加正式一些.比如,以下的这些句子: Growth in Europe is maintaining mo ...

  2. 关于电信cdma基站nid,sid,bid的解释

    通过cdma的基站代码确定该基站的经纬度位置,必须知道Sid.Nid.Bid这三个基站数据,缺一不可. SID 是系统识别码,每个地级市只有一个sid,是唯一的. NID是网络识别码,由各本地网管理, ...

  3. mysql innodb 奔溃问题

    ps -A | grep -i mysql kill 列出来的进程 service mysql start 我的问题就解决了 ------------------------------------- ...

  4. 自定义UIDatePikerView

    1.添加文件GoYearMonthDayPickerView.h .m .xib.NSDate+Helper.h .m.iCarousel.h .m 2.在Lable上显示日期 UILabel *ag ...

  5. .net学习笔记----HttpRequest类

    一.HttpRequest的作用 HttpRequest的作用是令到Asp.net能够读取客户端发送HTTP值.比如表单.URL.Cookie传递过来的参数. 返回字符串的那些值就不说了,那些基本上都 ...

  6. 树莓派通过apt方式安装opencv库

    1.安装opencv     开始之前进行必要的更新工作. sudo apt-get update     安装opencv. sudo apt-get install libcv-dev     安 ...

  7. OpenGL学习之路(二)

    1 引子 在上一篇读书笔记中,我们对书本中给出的例子进行详细的分析.首先是搭出一个框架:然后填充初始化函数,在初始化函数中向OpenGL提供顶点信息(缓冲区对象)和顶点属性信息(顶点数组对象),并启用 ...

  8. 【 Android】自定义的AlertDialog中的EditText无法调用输入法问题解决

    1.问题描述: 在自定义的AlertDialog 中添加了EditText组件,但运行时怎么点EditText都无法调出软键盘: 2.原因分析: 一开始我以为EditText的focus属性没有设置好 ...

  9. Linux命令之_Cut(转)

    linux之cut用法   cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对“行”来进行分析的,并不是整篇信息分析的. (1)其语法格式为:cut  [-bn ...

  10. 新手学习之浅析一下c/c++中的指针

    一.我们先来回忆一下指针的概念吧,方便下面的介绍 指针是存放地址值的变量或者常量.例如:int a=1;&a就表示指针常量(“&”表示取地址运算符,也即引用).int *b,b表示的是 ...