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使用websocket及封装过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了vue如何使用pdf-dist实现pdf预览以及水印添加的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要介绍了vue vant Area组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例
这篇文章主要给大家介绍了关于使用vue3+ts+setup获取全局变量getCurrentInstance的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了Vue3中逻辑复用的相关知识,文中的示例代码简洁易懂,对我们深入了解Vue3有一定的帮助,需要的小伙伴可以参考下2023-12-12
vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决
这篇文章主要介绍了vue el-select绑定对象时,回显内容不正确,始终是最后一项的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了解读resetFields()不生效的原因，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue3+ant design的form数组表单，如何校验,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-09-09
本篇文章主要介绍了vue.js组件之间传递数据的方法，组件实例的作用域是相互独立的，如何传递数据也成了组件的重要知识点之一，有兴趣的可以了解一下2017-07-07
在开发的过程中点击提交按钮,或者是一些其它场景总会遇到loading加载,下面这篇文章主要给大家介绍了关于vue3如何解决各场景loading过度的相关资料,避免白屏尴尬,需要的朋友可以参考下2023-03-03
最新评论