前言：（業務邏輯）
在vue中，遇到這樣的情況，初始化加載太多js，導致頁面白屏，為了解決這個情況，決定使用具體組件具體加載相應的cdn地址，
為啥不用vue的按需加載呢，是因為我們專案對性能要求很高，但是按需加載后，引入的插件包，打包以后的大小比cdn要大太多了，整體來說是使用他是得不償失，但是一次性加載太多cdn又會導致白屏，所以在這里我使用的方法：具體某個頁面使用第三方插件，就在使用的頁面js動態加載scirpt，并給他上標簽
具體操作：
1、面臨第一個問題，要先獲取到當前頁面所用到的所有引入 的 <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、給界面加載我們想放進去的cdn地址，因為vue是單頁面組件，所有我們直接放在 #app上
// 創建script標簽，引入外部檔案
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
document.getElementById('app').appendChild(script)分享原始碼：
mounted中呼叫：（必須是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) {
// 創建script標簽，引入外部檔案
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
document.getElementById('app').appendChild(script)
}
},到此為止！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/257419.html
標籤：其他
上一篇：BGP路由策略配置實體