DDR爱好者之家

浅谈vue项目可以从哪些方面进行优化
站长资源 2024/11/26 佚名
55 1538
DDR爱好者之家 Design By 杰米

图片优化

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="/UploadFiles/2021-04-02/img1.jpg">


组件懒加载







Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img class="mini-cover" :src="/UploadFiles/2021-04-02/img.src">


图片预加载


快速显示图片


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


三方插件懒加载（按需加载）


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


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


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


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


三种方案


    
  
  • 当页面展示的版块是固定的时候且内容高度不易变动时候，可以预先在组件外设置一个固定高度，显示的时候就像在一个框架里添加内容。当页面内容不固定时候，为了减少异步加载时组件重合的问题，可以在首屏在某组件数据加载完成时候设置其他组件显示，通过v-show显示。
    • 
  
  • 当页面整体固定时，可以为页面增加一个骨架，这样防止页面闪烁的情况。具体实施可以参照 https://www.jb51.net/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插件使用


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米