浅谈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 相关文章推荐
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
JS中常用的消息框总结
Feb 24 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 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
星际争霸任务指南——人族
2020/03/04 星际争霸
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
使用jquery实现放大镜效果
2014/09/02 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
详解webpack打包vue时提取css
2017/05/26 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 正则式使用心得
2009/05/07 Python
Python抽象类的新写法
2015/06/18 Python
Python手机号码归属地查询代码
2016/05/04 Python
Python探索之Metaclass初步了解
2017/10/28 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
3种python调用其他脚本的方法
2020/01/06 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
python如何求圆的面积
2020/07/01 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
Python __slots__的使用方法
2020/11/15 Python
关于青春的演讲稿
2014/05/05 职场文书
公证委托书格式
2014/09/13 职场文书
2015年话务员工作总结
2015/04/29 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
2016春季运动会前导词
2015/11/25 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
MySql数据库 查询时间序列间隔
2022/05/11 MySQL
nginx 配置指令之location使用详解
2022/05/25 Servers