問題背景
最近做的一個專案需要引入一個外部的第三方js指令碼。由於這是一個關於渲染3D建築的指令碼，所以體積比較大，大概有2M，載入完成也得要個好幾秒，網速慢的時候十幾秒都有可能。 之前也遇到指令碼載入慢的問題，但是沒這麼慢，所以這次就特別寫個文章記錄一下我的解決過程。
首先上兩張專案已完成的截圖。
下圖是通過第三方指令碼渲染出來的3D建築頁面
下圖是首頁，不需要用到第三方指令碼
遇到的問題和需求
- 引入外部指令碼太大，載入時間太長
- 首頁用不到外部指令碼，需要先渲染出來
- 用到外部指令碼的頁面，要是指令碼還沒載入好就點進去會報錯
解決問題的過程
我一開始通過 ` 這樣頁面是可以正常載入的，但是頁面出來的很慢，一開始會白屏一段時間等待這個js指令碼載入完成。雖然指令碼體積大是事實，但這使用者體驗肯定是可以優化的。 後來我又把這個指令碼放到了頁面底部，也就是標籤下面。這樣可以先讓頁面渲染出來，再慢慢載入這個龐大的指令碼，於是首頁是出來的很快，但是從首頁跳轉到需要用到這個指令碼的頁面就會報錯，如下
於是我又想到等指令碼載入完成再執行相關方法，這時就需要用到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();
};
}
}
}
複製程式碼總結一下我以上解決問題的步驟
- 在入口檔案的底部引入第三方指令碼，並給它加個id。當然也可以放在裡，但是需要額外加上html5新增的 async 這個屬性，這樣指令碼才能非同步載入。
- 在需要用到這個指令碼的頁面，先判斷指令碼有沒有載入完成（我這裡是直接判斷window.DDEarth物件是否為空）。如果已經載入完成，就直接執行相關操作；如果沒有，先通過document.getElementById找到那個指令碼，然後監聽指令碼的onload事件，再做相關操作。
什麼情況可以用我以上思路？
- 引入的第三方指令碼較大，載入所需時間較長
- 頁面按需載入，整個專案只有其中某幾個頁面需要用到引入的第三方指令碼
- 第三方指令碼沒載入完就渲染頁面導致的頁面報錯