vue优化小技巧

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

图片优化

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

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

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

  安装：yarn add vue-lazyload

  在入口文件中引入：

  import VueLazyload from "vue-lazyload";
  
  Vue.use(VueLazyload);
  

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

首屏优化

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

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

归根到底就是页面一开始加载的时候没有内容，如果页面一进来

里就有内容的话就不会产生白屏的效果了，我的做法是将第一屏的结构样式先写到

里，如下所示：

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

还有一种方案是在

写一个加载中的动画，这样看起来也会好一点，比较适合用在移动端。

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

使用Toast弹窗美化提示

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

let ifhadToast = false;

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

    ...
}

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

总结

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