前言:(業(yè)務(wù)邏輯)
在 vue 中,遇到這樣的情況,初始化加載太多js,導(dǎo)致頁面白屏,為了解決這個情況,決定使用具體組件具體加載相應(yīng)的 cdn地址。
為啥不用 vue 的按需加載呢,是因為我們項目對性能要求很高,但是按需加載后,引入的插件包,打包以后的大小比 cdn 要大太多了,整體來說是使用他是得不償失,但是一次性加載太多 cdn 又會導(dǎo)致白屏,所以在這里我使用的方法:具體某個頁面使用第三方插件,就在使用的頁面 js 動態(tài)加載 scirpt,并給他上標(biāo)簽
具體操作:
1、面臨第一個問題,要先獲取到當(dāng)前頁面所用到的所有引入 的 <script>,下面的 newArr 就是拿到的所有的script地址
let scriptsArr = document.getElementsByTagName('script')
let newArr = []
//獲取所有的script地址
for (var i = 0; i < scriptsArr.length; i++) {
newArr.push(scriptsArr[i].getAttribute('src', 4))
}
2、給界面加載我們想放進(jìn)去的 cdn 地址,因為 vue 是單頁面組件,所有我們直接放在 #app上// 創(chuàng)建script標(biāo)簽,引入外部文件
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
document.getElementById('app').appendChild(script)
// 創(chuàng)建script標(biāo)簽,引入外部文件
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
document.getElementById('app').appendChild(script)
分享源碼:
mounted 中調(diào)用:(必須是 mounted,不能是 created,必須等頁面加載完成才能掛載)
let url = '//cktcdn.kaoti100.com/cdn.jsdelivr.net/npm/vue-aplayer/vue-aplayer.js'
this.app_script(url)//初始化給他添加cdn地址
methods 里面定義方法/**
* 獲取頁面上的所有script地址。來判斷是否要加cdn地址
* */
app_script(url) {
let scriptsArr = document.getElementsByTagName('script')
let newArr = []
//獲取所有的script地址
for (var i = 0; i < scriptsArr.length; i++) {
newArr.push(scriptsArr[i].getAttribute('src', 4))
}
let isFirst = true //判斷是否加載過這個script,有就不加載了
let cdnUrl = url
newArr.forEach(item => {
if (item === cdnUrl) {
isFirst = false
}
})
if (isFirst) {
// 創(chuàng)建script標(biāo)簽,引入外部文件
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
document.getElementById('app').appendChild(script)
}
},
/**
* 獲取頁面上的所有script地址。來判斷是否要加cdn地址
* */
app_script(url) {
let scriptsArr = document.getElementsByTagName('script')
let newArr = []
//獲取所有的script地址
for (var i = 0; i < scriptsArr.length; i++) {
newArr.push(scriptsArr[i].getAttribute('src', 4))
}
let isFirst = true //判斷是否加載過這個script,有就不加載了
let cdnUrl = url
newArr.forEach(item => {
if (item === cdnUrl) {
isFirst = false
}
})
if (isFirst) {
// 創(chuàng)建script標(biāo)簽,引入外部文件
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
document.getElementById('app').appendChild(script)
}
},