一 發新版本導致
問題的根源是服務器js檔案更新了，頁面還在請求以前的js檔案，可以保留之前webpack打包的檔案，但是時間久了檔案體積會積累到很大，而且從產品角度更希望用戶訪問新的資源，所以最好的解決方式是在報錯時給用戶提示，用戶點擊確認后重繪頁面，前端如何能catch到這種錯誤？
目前還沒找到catch這種錯誤的方法，但是，可以模擬這種錯誤的出現，
js檔案是以script標簽的形式動態添加到head標簽里的，可以給head系結DOMNodeInserted這個事件在有子元素插入的時候觸發，可以在回呼里拿到插入的標簽名以及標簽的屬性包括src，這樣在所有js資源加載時我們都可以在回呼事件里拿到資源路徑，然后在創建一個請求去請求該資源，代碼如下：
const head = document.getElementsByTagName('head')[0]
head.addEventListener('DOMNodeInserted', e => {
// 獲取標簽名
const type = e.target.tagName
// 獲取資源路徑
const url = e.target.src
if (type === 'SCRIPT' && url) {
// 創建請求，如果需要低版本瀏覽器兼容的，請注意
let xhr = new XMLHttpRequest()
xhr.open('get', url)
xhr.onload = () => {
const text = xhr.responseText
if (text.indexOf('<') === 0) {
this.$modal.info({
title: '檢測到有新的版本發布，需要重繪頁面以訪問最新內容',
width: 350,
okText: '確定',
onOk() {
location.reload()
}
})
}
}
xhr.send()
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544134.html
標籤：其他
上一篇：pnpm的基本原理及快速使用