浅谈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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python 获取等间隔的数组实例
2019/07/04 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
python实现猜数游戏
2020/03/27 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
几道数据库的概念性面试题
2014/05/30 面试题
施工班组长岗位职责
2014/01/05 职场文书
学前班评语大全
2014/05/04 职场文书
银行贷款收入证明
2014/10/17 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
Java设计模式之代理模式
2022/04/22 Java/Android