阅读 1280

vue优化小技巧

记录一下我自己优化vue项目的一些小方法

图片优化

  • 一般切完图后我会把图片压缩一次,这样可以减小图片的体积,压缩工具我用得是这个 tinypng.com/,免费的,而且压缩完分辨率也跟原来差不多,视觉上不会有太大的影响。

  • 一些小图标,做成雪碧图能减少图片请求数据,建议只把那些固定的,后期不会修改的图标做成雪碧图,如果是那些要经常改动的就不建议这么做发,因为一旦要修改就连其它地方也要修改了,如果项目比较复杂的话可能连自己都忘了要改哪里了。

  • 图片做懒加载处理,我用的是 vue-lazyload 插件,使用方法如下:

    安装:yarn add vue-lazyload

    在入口文件中引入:

    import VueLazyload from "vue-lazyload";
    
    Vue.use(VueLazyload);
    复制代码

    然后只需要把图片的 src 改为 v-lazy 就行了,注意 imgUrl 是图片的http路径,如果是本地的图片路径则需要处理下,比如先用 require() 的方式引入再赋值

    <img v-lazy="imgUrl" />
    复制代码

首屏优化

用vue项目有个特点就是一进入页面会有一段时间的白屏,给人的体验非常差,网上也有很多方案,不过大多都是说什么模块按需加载,开启gzip压缩,服务端渲染(ssr),服务端渲染还算靠谱,前面那两种只能加快页面加载速度,还是无法解决刚进入页面的白屏情况的,原因是因为模板文件 index.html 里有如下的一个标签

<div id="app"></div>
复制代码

当我们把项目打包后一般就是如上所示,页面加载时首先展示的是这个,当js和css加载完成后再把这个标签替换成我们本来的页面内容,所以在替换的这个过程中就会产生一段时间的白屏,如果遇上网络慢的情况会更加明显。无论你的代码压缩到多少,分了多少模块,还是会出现白屏的。

归根到底就是页面一开始加载的时候没有内容,如果页面一进来 <div id="app"></div> 里就有内容的话就不会产生白屏的效果了,我的做法是将第一屏的结构样式先写到 <div id="app"></div> 里,如下所示:

<div id="app">
    <div style="width:100%;height:450px;background:url('../src/assets/header_sm.jpg') no-repeat;background-color:#d81f25;background-position:top;">
      <div style="position:relative;width:1056px;height:440px;margin:0 auto;">
        <a target="_blank" style="display: block;width: 122px;height: 32px;background: url(../src/assets/logo.png);background-repeat: no-repeat;background-size: 100% 100%;position: absolute;top: 21px;left: 115px;"></a>
      </div>
    </div>
    <div style="width:100%;position:relative;background-color:#d81f25;">
      <div style="-webkit-box-sizing: border-box;width: 1058px;margin: 0 auto;height: 100%;background-color: #fbe9cf;position: relative;box-sizing: border-box;height: 577px;padding: 20px 0 11px 20px;">
        <div style="float: left;width: 728px;">
          <div style="background: #fae588;border: 10px solid #fae588;-webkit-box-sizing: border-box;box-sizing: border-box;height: 396px;"></div>
        </div>
      </div>
    </div>
  </div>
复制代码

这样一进入页面首先看到的就是首屏的静态内容了,当页面加载完成后就会替换成正式内容,给人一种视觉上的误差,就不会产生白屏的情况了,体验上也会好一点

还有一种方案是在 <div id="app"></div> 写一个加载中的动画,这样看起来也会好一点,比较适合用在移动端。

网上还有另一种方案是预渲染方案,需要用到 prerender-spa-plugin 这个插件,其实原理都差不多,都是在页面开始加载时让页面有内容,具体可以看 blog.csdn.net/huangjianfe…,我照着文章那样配置完在打包时老是报这个错误 Chromium revision is not downloaded. Failed to download Chromium 网上的方法都试过了还是失败,Chromium各个版本都试过了也不行,都不知道具体是什么原因。

使用Toast弹窗美化提示

在提交表单时经常会用到弹窗提示,如果设计稿没有做的话我们就要自己做了,单纯的使用 alert() 的话给人的感觉不是很好,所以我们可以自己封装一个toast组件,具体做法参考 www.jianshu.com/p/0891ae3a7… 我也是按照这篇文章来写的,不过这里有个地方需要修改下,


let ifhadToast = false;

function showToast(msg, duration = 1500) {
    if(ifhadToast) {
        return ;
    }
    
    ifhadToast = true;

    ...
}
复制代码

加这个主要是防止连续点击造成toast连续出现的情况,加了之后就不会出现这种情况了,只会等上一次toast执行完之后才会继续弹出。

总结

无论何时项目优化都是需要我们关注的一个点,从用户角度来看,用户体验决定了这个项目是否是一个优秀的项目,作为前端,不仅要关注业务逻辑,还要时刻关注用户体验,哪怕是一些不起眼的地方也值得我们去优化。