在使用AWS SDK的时候,使用npm安装并引入,发现会导致打包过大,这里使用动态按需加载的方式引入SDK解决该问题。
原来的引入方式
import AWS from 'aws-sdk'
// ...
优化后
import load from '@/utils/load-cdn-js'
const awsCDN = 'https://sdk.amazonaws.com/js/aws-sdk-2.1072.0.min.js'
export defaulat {
// ...
created() {
this.init()
},
methods: {
init() {
load(awsCDN, (err) => {
if (err) {
this.$message.error(err.message)
return
}
this.initS3Upload()
}, 'AWS')
},
}
}
load-cdn-js.js
let callbacksObj = {}
function loadJS(name) {
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
// check is successfully downloaded script
return window[name]
}
const dynamicLoadScript = (src, callback, name) => {
const existingScript = document.getElementById(src)
const cb = callback || function () { }
if (!existingScript) {
const script = document.createElement('script')
script.src = src // src url for the third-party library being loaded.
script.id = src
document.body.appendChild(script)
callbacksObj[name] = []
callbacksObj[name].push(cb)
const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
onEnd(script)
}
if (existingScript && cb) {
if (loadJS(name)) {
cb(null, existingScript)
} else {
callbacksObj[name].push(cb)
}
}
function stdOnEnd(script) {
script.onload = function () {
// this.onload = null here is necessary
// because even IE9 works not like others
this.onerror = this.onload = null
for (const cb of callbacksObj[name]) {
cb(null, script)
}
callbacksObj[name] = null
}
script.onerror = function () {
this.onerror = this.onload = null
cb(new Error('Failed to load ' + src), script)
}
}
function ieOnEnd(script) {
script.onreadystatechange = function () {
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
this.onreadystatechange = null
for (const cb of callbacksObj[name]) {
cb(null, script) // there is no way to catch loading errors in IE8
}
callbacksObj[name] = null
}
}
}
export default dynamicLoadScript
网友评论