vue項目初次優化

着手優化我最早想到的是，打包，加載，速度，渲染，用戶體驗；因此個人也從這幾個詞開始入手。本次優化主要作了三件事，代碼（vue），懶加載，骨架屏；還有不少會繼續作。。。

代碼

打包 webpack

如今雖然開發是按照模塊化開發，webpack也是遵循的模塊打包的，可是打包是按照模塊打包了嗎？

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

• 上代碼！！！優化前

  

  因爲平時的不注意，代碼中大量的組件引用都是用這種方式；

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

• 優化

  很簡單，改爲異步就好；

其實在router中就已經使用了！

修改完成後打包，就能夠看到效果；

1. js文件明顯增長了
2. 頁面中head標籤中 一樣增長了js引入；
3. 這裏須要注意的是js引入放到head中會不會影響優化？其實不會的，由於引入的script標籤中加了async屬性使其變成了異步；

   

   head標籤

   

代碼

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);
複製代碼

待續。。。