vue项目使用cdn加速减少webpack打包体积

更新时间：2022年08月17日 10:30:23 作者：shewlong

通过压缩代码的手段可减小网络传输的大小,但实际上最影响用户体验的还是网页首次打开时的加载等待,其根本原因是网络传输过程耗时较大,这篇文章主要给大家介绍了关于vue项目使用cdn加速减少webpack打包体积的相关资料,需要的朋友可以参考下

1.引入cdn资源

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.5/lib/theme-chalk/index.css" rel="external nofollow"  />
<link rel="stylesheet" href="https://unpkg.com/vant@1.1.2/lib/vant-css/index.css" rel="external nofollow"  />

 <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js"></script>
 <script src="https://unpkg.com/element-ui@2.3.5/lib/index.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vant@1.1.2/lib/vant.min.js"></script>
 <script src="https://cdn.staticfile.org/axios/0.17.1/axios.min.js"></script>

注：1.该文件为项目入口html文件，通常处于项目public目录下或者项目根目录下，使用了vant和elementUi,2.所以还应该引入相对应得css资源包3.cdn加速地址可以在官网中找到

代码展示

2.在webpack基础配置文件中加入externals配置，打包、编译时去除cdn加速的模块，可以大大压缩打包后的压缩包体积

  externals: {
   vue: 'Vue',
   'vue-router': 'VueRouter',
   "element-ui": "ElementUI",
   'vant':"Vant",
   axios: 'axios',
   vuex: 'Vuex',
  },

代码展示

3.去除main.js中对以上模块的引用，注册

总结

到此这篇关于vue项目使用cdn加速减少webpack打包体积的文章就介绍到这了,更多相关vue使用cdn加速内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue路由的模块自动化与统一加载实现
这篇文章主要介绍了Vue路由的模块自动化与统一加载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue将后台数据时间戳转换成日期格式
这篇文章主要为大家详细介绍了vue将后台数据时间戳转换成日期格式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
Vue vm.$attrs使用场景详解
这篇文章主要介绍了vm.$attrs使用场景详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
详解Vue ElementUI手动上传excel文件到服务器
这篇文章主要介绍了详解Vue ElementUI手动上传excel文件到服务器，对ElementUI感兴趣的同学，可以参考下
2021-05-05
Vue报错:TypeError:Cannot create property '
这篇文章主要介绍了Vue报错:TypeError:Cannot create property 'xxx' on string 'xxxx'问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
浅谈Vue.js
本文主要介绍了Vue.js的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
Nuxt.js nuxt-link与router-link的区别说明
这篇文章主要介绍了Nuxt.js nuxt-link与router-link的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
VueX模块的具体使用(小白教程)
这篇文章主要介绍了VueX模块的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue3与webpack5安装element-plus样式webpack编译报错问题解决
这篇文章主要介绍了vue3与webpack5安装element-plus样式webpack编译报错,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vue中关于redirect(重定向)初学者的坑
这篇文章主要介绍了vue中关于redirect(重定向)初学者的坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08