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执行完以后才会继续弹出。

总结

不管什么时候项目优化都是须要咱们关注的一个点，从用户角度来看，用户体验决定了这个项目是不是一个优秀的项目，做为前端，不只要关注业务逻辑，还要时刻关注用户体验，哪怕是一些不起眼的地方也值得咱们去优化。