【vue】解决 vue项目打包后线上报错无法请求cdn.jsdelivr.net相关资源问题
解决 vue项目打包后线上报错无法请求cdn.jsdelivr.net相关资源问题
·
使用cdn原因
由于Vue 项目打包后的 vendor.js 过大,将导致打包速度慢,首屏加载慢 ,其原因是第三方库比如(vue、vue-router、vuex、axios等)都会被打包到 vendor.js 文件里面,而浏览器是在加载这些文件之后,才开始显示首屏的。所以把第三方库比如(vue、vue-router、vuex、axios等)通过cdn的方式引入到项目中,这样浏览器可以开启多个线程,将vendor.js、外部js、css等加载下来(bootcdn等资源,或其他服务器资源),使得vendor.js文件减少,从而提升首屏加载速度。
使用位置 vue.config.js
// eslint-disable-next-line no-unused-vars
const isProd = process.env.NODE_ENV === 'production'
// eslint-disable-next-line no-unused-vars
const assetsCDN = {
// webpack build externals
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
'viser-vue': 'ViserVue'
},
css: [],
// https://unpkg.com/browse/vue@2.6.10/
js: [
// 将cdn.jsdelivr.net替换为 fastly.jsdelivr.net
// 国外静态资源库 cdn.jsdelivr.net、fastly.jsdelivr.net、gcore.jsdelivr.net
// 国内静态资源库 cdn.staticfile.org(掘金)、cdn.bytedance.com(字节跳动)、cdn.baomitu.com(360)
'//fastly.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
'//fastly.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js',
'//fastly.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
'//fastly.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js',
'//unpkg.com/viser-vue/umd/viser-vue.min.js'
]
}
module.exports = {
chainWebpack: config => {
// en_US: If prod is on assets require on cdn
// zh_CN: 如果是 prod 模式,则引入 CDN 依赖文件,有需要减少包大小请自行解除依赖
if (isProd) {
config.plugin('html').tap(args => {
args[0].cdn = assetsCDN
return args
})
}
}
}
解决办法
一、调整引入资源地址
1、cdn.jsdelivr.net
未受污染的子域:
2、fastly.jsdelivr.net
,由 Fastly 提供
3、gcore.jsdelivr.net
,由 G-Core 提供
4、testingcf.jsdelivr.net
,由 CloudFlare 提供
二、国内资源地址
1、cdn.staticfile.org
,七牛云和掘金的静态资源库
2、cdn.bytedance.com
,字节跳动静态资源公共库
3、cdn.baomitu.com
,360 前端静态资源库
第一种方法只需要替换链接地址中的cdn,第二种需要在国内网站上搜索 JS 库的名字,然后复制搜索结果给出的链接,再替换掉对应的 jsDelivr 链接。
更多推荐
已为社区贡献1条内容
所有评论(0)