vue專案初次優化

鬼不語發表於2019-02-27
Vue優化

著手優化我最先想到的是，打包，載入，速度，渲染，使用者體驗；所以我的也從這幾個詞開始入手。本次優化主要做了三件事，程式碼（vue），懶載入，骨架屏；還有很多會繼續做。。。

程式碼

打包 webpack

現在雖然開發是按照模組化開發，webpack也是遵循的模組打包的，但是打包是按照模組打包了嗎？

webpack先簡單說一下！webpack本就是分塊打包，所以不用過多注意。（JS引入了相同的庫和模組，這時候將公共的庫抽成一個JS檔案，就用CommonsChunkPlugin）

  • 上程式碼！！！優化前

    vue專案初次優化
    由於平時的不注意，程式碼中大量的元件引用都是用這種方式；

    可這樣就導致了首屏展示或第一次載入中，不用的元件也打包到了入口js中（app.js）;得到的結果就是首屏js越來越大，載入時間也就長了；

  • 優化

    很簡單，改成非同步就好；

vue專案初次優化
其實在router中就已經使用了！

vue專案初次優化

修改完成後打包，就可以看到效果；

  1. js檔案明顯增加了
  2. 頁面中head標籤中 同樣增加了js引入；
  3. 這裡需要注意的是js引入放到head中會不會影響優化？其實不會的，因為引入的script標籤中加了async屬性使其變成了非同步；
    vue專案初次優化
    head標籤
    vue專案初次優化

程式碼

  1. 增加了v-if的使用，特別是針對所有不是頻繁切換元件和dom；而這麼做是因為v-if和v-show的區別；v-if是“true”條件渲染，v-show是什麼條件都渲染
  2. 元件非同步載入，也就打包部分的講到的；但是判斷元件是否非同步，就需要根據首屏展示的dom結構自行選擇，不是所有元件適合非同步載入；
  3. 為了評分也在圖片上，加上alt的預設引數；

骨架屏

骨架屏就很簡單了，按照使用頁面的結果編寫就ok了；

有個外掛：vue-content-loader 也可以線上編輯骨架屏；

但當前專案用了ssr，首屏的骨架屏就雞肋了！so 我就在第二屏及以後加上了骨架屏，而第三屏正好是一張特別大的詳情圖片，關鍵設計沒有切成若干小圖，是一大張，長，長長，長長長的詳情圖片！嚴重影響了頁面的loading速度

懶載入

懶載入做了一個元件，而程式碼是直接拿vue-lazy-component元件的；方便修改和除錯；

  • vue-lazy-component程式碼

    主要用了原生的IntersectionObserver（交叉觀察器）建構函式；

var io = new IntersectionObserver(callback, option);
複製程式碼

  • IntersectionObserver函式

    解釋：監聽目標元素與視口產生一個交叉區

    介紹直接程式碼

let io = null;
// 回撥函式
var callback = function(entries) {
    if (
        // 正在交叉
        entries[0].isIntersecting ||
        // 交叉率大於0
        entries[0].intersectionRatio
    ) {
        // 在元件銷燬前取消觀察-銷燬方法
        io.unobserve(this.$el);
    }
};
// 觀察視口與元件容器的交叉情況
io = new window.IntersectionObserver(callback, {
    // 容器視窗，滾動的父元素
    root: this.viewport,
    // 可以在父級（root）影響範圍 擴充套件或縮小，類似css的margin～
    rootMargin,
    // 觸發回撥的位置，“%”單位， [0, 0.25, 0.5, 0.75, 1]就表示當目標元素 0%、25%、50%、75%、100% 可見時，會觸發回撥函式。
    threshold: [0, Number.MIN_VALUE, 0.01]
});
// 觀察物件-掛載方法
this.io.observe(this.$el);
複製程式碼

待續。。。

相關文章