引入外部js指令碼載入慢與頁面白屏問題
摘要：
最近做的一個專案需要引入一個外部的第三方js指令碼。由於這是一個關於渲染3D建築的指令碼，所以體積比較大，大概有2M，載入完成也得要個好幾秒，網速慢的時候十幾秒都有可能。 之前也遇到指令碼載入慢的問題，但是沒這麼慢，所以這次就特別寫個文章記錄一下我的解決過程。
首先上兩張專案已完成的截圖。...
最近做的一個專案需要引入一個外部的第三方js指令碼。由於這是一個關於渲染3D建築的指令碼，所以體積比較大，大概有2M，載入完成也得要個好幾秒，網速慢的時候十幾秒都有可能。 之前也遇到指令碼載入慢的問題，但是沒這麼慢，所以這次就特別寫個文章記錄一下我的解決過程。
首先上兩張專案已完成的截圖。
下圖是通過第三方指令碼渲染出來的3D建築頁面
下圖是首頁，不需要用到第三方指令碼
遇到的問題和需求
- 引入外部指令碼太大，載入時間太長
- 首頁用不到外部指令碼，需要先渲染出來
- 用到外部指令碼的頁面，要是指令碼還沒載入好就點進去會報錯
解決問題的過程
我一開始通過 ` 這樣頁面是可以正常載入的，但是頁面出來的很慢，一開始會白屏一段時間等待這個js指令碼載入完成。雖然指令碼體積大是事實，但這使用者體驗肯定是可以優化的。 後來我又把這個指令碼放到了頁面底部，也就是標籤下面。這樣可以先讓頁面渲染出來，再慢慢載入這個龐大的指令碼，於是首頁是出來的很快，但是從首頁跳轉到需要用到這個指令碼的頁面就會報錯，如下
這個錯誤原因是這個頁面需要用到window.DDEarth這個物件，但是由於此時這個指令碼還沒有載入完成，所以window下並沒有這個物件，所以就報錯了。
於是我又想到等指令碼載入完成再執行相關方法，這時就需要用到onload這個方法了，onload這個方法在指令碼載入完成的時候會執行。我引入指令碼的時候給它加了個id，方便以後通過dom找到，程式碼如下：
// 入口檔案
</body>
<script id="ddEarthScript" src="./DDEarth.js"></script>
// PageTwo.js
componentDidMount() {
const scriptEle = document.getElementById('ddEarthScript'); // 找到指令碼節點
if (scriptEle) {
scriptEle.onload = () => {
// 指令碼載入完成執行載入地圖的操作
this.loadEarthMap();
};
}
}
複製程式碼
有了以上程式碼我跳轉到PageTwo這個頁面的時候，會等到DDEarth.js這個指令碼載入完成，再執行載入建築地圖的操作，這樣就不會報錯了。 但是這又有一個問題，就是如果我跳轉到PageTwo的之前，DDEarth.js已經載入完成了，onload這個事件在PageTwo這個頁面中就不生效了，loadEarthMap這個方法自然也就不會執行了。 這個時候需要加一個判斷，完整程式碼如下：
// PageTwo.js
componentDidMount() {
if (window.DDEarth) {// 如果跳轉到此頁面之前，指令碼已載入完成
this.loadEarthMap();
} else {
const scriptEle = document.getElementById('ddEarthScript');
if (scriptEle) {
scriptEle.onload = () => {
this.loadEarthMap();
};
}
}
}
複製程式碼