使用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 链接。

Logo

前往低代码交流专区

更多推荐