浅谈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模拟struts2的多action调用示例
May 19 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
js中数组的常用方法小结
Dec 30 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
详解angularjs 学习之 scope作用域
Jan 15 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
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下使用无限生命期Session的方法
2007/03/16 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Selenium的使用详解
2018/10/19 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
Python如何实现邮件功能
2020/05/27 Python
python 动态绘制爱心的示例
2020/09/27 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
《小草和大树》教学反思
2014/02/16 职场文书
社区活动总结报告
2014/05/05 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
公司离职证明标准样本
2014/10/05 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
MySQL查询日期时间
2022/05/15 MySQL