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執行完以後纔會繼續彈出。

總結

不管什麼時候項目優化都是須要咱們關注的一個點，從用戶角度來看，用戶體驗決定了這個項目是不是一個優秀的項目，做爲前端，不只要關注業務邏輯，還要時刻關注用戶體驗，哪怕是一些不起眼的地方也值得咱們去優化。