優化vue build後的部署項目加載速度

1. 關於vue 打包後的項目運行邏輯

  首先要明白vue打包後的項目加載時依賴的誰,打開dist文件包,從js文件中可以看到一個manifest.開頭後面跟着一長串隨機碼的.js文件, 這個就是整個vue項目的加載工具,

   從這個地方可以看到, 加載的方式是script標籤加載需求文件, 什麼時候加載就需要看app開頭的後面一串隨機碼的文件了。

 

   如圖所示,在app文件中包含了咱們的項目核心,路由配置,從這一段可以看出來,他是在進入路由加載後進行的加載,這裏的g.e就是上面的script加載的方法。

 

       那麼,可想而知,跳入到路由纔會加載路由所需要的模塊文件,這是大家經常做的懶加載優化。目的是降低頁面初始化的依賴文件大小,不然路由依賴文件和主要文件合在一起加載會導致單個文件體積過大完成時間被拉長導致項目出現慢,但是分開的話又會導  致現在這種情況,一旦某個路由的依賴文件過大,也會照成加載過慢

  

 

    

  這個圖就是整個優化思路的核心,將過大的文件同步加載,以減少時間。

 

  接下來說說如何實現 先上代碼

 

  

  

  

/**
 * 優化加載類
 * 將webpack異步加載得文件提前加載用在調用使用
 */
class Preload {
    constructor (){
        // url
        this.url = null;
        // 文件內容
        this.body = null;
        // 狀態
        this.state = 0;
        // 添加到全局
        this.constructor.Maps.push(this);
    }

    load (url){
        this.url = url;
        // 新建一個緩存對象
        fetch(url).then(function(response) {
            return response.text()
        }).then((body) => {
            // 緩存文件內容
            this.body = body;
            if( this.state == 2 ){
                this.run();
            }else {
                // 修改狀態
                this.state = 1;
            }
        })
    }

    goonLoad (){
        this.onload && this.onload();
        this.onload = null;
    }

    run (fn){
        fn && (this.onload = fn);
        if( this.state == 1 ){
            eval(this.body), this.goonLoad();
        }else {
            this.state = 2;
        }
    }

    static Maps = [];

    static get (url){
        return this.Maps.find((Pro)=>{ return Pro.url === url; });
    }

    static url (url){
        (new this()).load(url);
    }

    static run (url){
        const pro = this.get(url);
        pro && pro.run();
    }

    static appendChild (script){
        const url = script.getAttribute("src");
        const pro = this.get(url);
        if( pro ){
            pro.run(script.onload);
        }else {
            document.head._appendChild(script);
        }
    }
}

// Preload.url("./static/js/app.a5eb45e01a814e58c58f.js");
// Preload.url("./static/js/0.b1ab96be57c754c737b4.js");
// Preload.url("./static/js/11.c98ac5bee35902600d66.js");

// 預加載
// Preload.url("http://10.168.11.225:8081/baidumap/bmapgl/sty/fs.js?udt=20190618&v=001");
// fetch("http://10.168.11.225:8081/baidumap/bmapgl/mapstyle/DarkColorMapStyle.json")

document.head._appendChild = document.head.appendChild;
document.head.appendChild = function(script){
    // if(  )
    // this._appendChild.apply(this,arguments);
    Preload.appendChild(script);
}

 

 很簡單易懂的代碼,  核心思路就是接管head的appendChild方法。然後在配置中找到最大的幾個路由依賴文件,提前加載,

  Preload.url("./static/js/11.c98ac5bee35902600d66.js");

  在加載中採用fetch的方式將代碼以字符串的形式保存下來,當檢測到文件被script加載的時候 用eval來執行模擬標籤自動加載, 觸發script的load事件維持原來的流程;

 

  是不是很簡單,一旦想清楚整個結構,就可以在不改變原來流程的前提下進行我們想要的優化了!~~~

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章