浅谈vue项目可以从哪些方面进行优化


Posted in Javascript onMay 05, 2018

图片优化

1、图片大小优化,部分图片使用WebP(需要考虑webp兼容性)

  1. 在线生成,如智图、又拍云
  2. gulp生成,gulp-webp或gulp-imageisux
  3. canvas生成

2、减少图片请求,使用雪碧图

  1. 在线生成:sprites Generator、腾讯的gopng、spriteme
  2. 代码生成:gulp.spritesmith或者sass的compass

页面性能优化

图片或组件懒加载

使用vue-lazyload组件或其他一些组件

vue-lazyload地址: https://www.npmjs.com/package/vue-lazyload

图片懒加载:v-lazy或使用v-lazy-container包含一个图片组

// 引入一张图片 
<img v-lazy="//domain.com/img1.jpg"> 
// 引入一组图片
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
 <img data-src="//domain.com/img1.jpg">
 <img data-src="//domain.com/img2.jpg">
 <img data-src="//domain.com/img3.jpg"> 
</div>

组件懒加载

Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

图片预加载

快速显示图片

使用场景:在某个查看图片的组件,当不断翻看下一页的图片时,从服务端获取数据再展示图片会出现图片缓慢加载的情况,此时可以在展示新数据时候先预加载图片,图片加载完之后在,将图片填充到对应位置

三方插件懒加载(按需加载)

js文件一般是同步加载的,放在页面内会阻塞主要js文件加载。

使用场景:有的项目必须引入jquery等文件时,在组件内部引入这些文件一定程度会阻塞页面渲染,因而通过特定事件(点击或者弹窗)动态加载jquery等JS文件,可以使主页面快速显示出来。

异步加载页面,如何让组件之间不重合

加载多个vue组件时,同时组件是通过服务端数据渲染时,会出现多个组件先重合后分离的状况

三种方案

  • 当页面展示的版块是固定的时候且内容高度不易变动时候,可以预先在组件外设置一个固定高度,显示的时候就像在一个框架里添加内容。当页面内容不固定时候,为了减少异步加载时组件重合的问题,可以在首屏在某组件数据加载完成时候设置其他组件显示,通过v-show显示。
  • 当页面整体固定时,可以为页面增加一个骨架,这样防止页面闪烁的情况。具体实施可以参照 https://3water.com/article/130505.htm
  • 服务端渲染页面,对于一些页面数据固定、更改较少的,可以考虑通过服务端渲染,会在短时间将页面显示出来,有比较好的用户体验。

减少引入外部文件大小

项目引入部分ElementUI内容时,通过引入babel-plugin-component配置.babelrc文件,这样即可引入部分组件,从而减少组件的大小。

路由懒加载

但使用到vue-router时,webpack会将所有组件打包在一个js文件中,这样就导致这个文件非常大,从而会影响首页的加载,最好的方法就是将其他路由分别打包到不同js文件中,切换路由时再加载对应js文件。

resolve => require([URL], resolve), 支持性好

() => system.import(URL) , webpack2官网上已经声明将逐渐废除, 不推荐使用

() => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
Angular模版驱动表单的使用总结
May 05 #Javascript
浅谈Angular HttpClient简单入门
May 04 #Javascript
Vue项目全局配置微信分享思路详解
May 04 #Javascript
vue嵌套路由与404重定向实现方法分析
May 04 #Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 #Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
node实现的爬虫功能示例
May 04 #Javascript
You might like
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
很好用的PHP数据库类
2009/05/27 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
如何在sublime编辑器中安装python
2020/05/20 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
办公室文员工作职责
2014/01/31 职场文书
人事经理岗位职责
2014/04/28 职场文书
人代会标语
2014/06/30 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
新员工辞职信范文
2015/05/12 职场文书
军事理论课感想
2015/08/11 职场文书
体育部部长竞选稿
2015/11/21 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书