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

总结

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