脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue使用cdn加载资源

Vue如何使用cdn加载资源加快打包速度

 更新时间：2022年05月26日 09:52:42   作者：努力搬砖的阿一  
外部的库文件,可以使用CDN资源,或者别的服务器资源等,下面这篇文章主要给大家介绍了关于Vue如何使用cdn加载资源加快打包速度的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

为什么使用CDN

Vue项目打包的时候，默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。

解决方法

将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。

外部的库文件，可以使用CDN资源，或者别的服务器资源等。

使用CDN主要解决两个问题

  • 打包时间太长、打包后代码体积太大，请求慢
  • 服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题

具体步骤

下面，以引入vue、vuex、vue-router为例，说明处理流程。

资源引入

1. 在项目根目录index.html使用cdn节点导入

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!--开发环境-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <!--生产环境-->
    <!--<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>-->
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.23.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.15.6/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</body>

2. 在vue.config.js中加入externals外部扩展

configureWebpack: {
    externals: {
        "vue": "Vue",
        "vue-router": "VueRouter",
        "axios": "axios",
        "moment": "moment",
        "element-ui": "ELEMENT",
    }
},

这里解释一下externals 配置选项的作用：

我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。

踩坑配置注意点：element-ui要大写为ELEMENT

3. 去掉原有的引用

如果不删除原先的import，项目还是会从node_modules中引入资源。
也就是说不删的话，npm run build时候仍会将引用的资源一起打包，生成文件会大不少。所以我认为还是删了好
image.png

打包对比

引入node_modules中模块：可以看到element和moment占比大

image.png

CDN引入模块：

能够看到vendor.js文件大大减少，打包速度也快了不少

问题集 vue-cli 4使用report分析vendor.js

Vue Cli（@/vue/cli）自带的webpack包体积优化工具，它可以查看各个模块的size大小，方便优化。只需要在build后面加上 --report 参数即可。

1. 我们把命令配置到package.json里

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "report": "vue-cli-service build --report"  //加入该行
},

执行npm run report 打包并生成report。

注意：网上很多说要先安装webpack-bundle-analyzer包，其实不需要安装。

2. 运行npm run report 后，会在 build 的同时，在dist目录会生成一个report.html，打开后可看到各文件占用大小

附：vue项目常用的cdn地址

1.axios

https://cdn.bootcss.com/axios/0.18.0/axios.min.js

2.swiper

  • https://unpkg.com/swiper@5.3.8/css/swiper.css
  • https://unpkg.com/swiper@5.3.8/js/swiper.js
  • https://cdn.jsdelivr.net/npm/vue-awesome-swiper/dist/vue-awesome-swiper.js
< script type=“text/javascript”>
Vue.use(window.VueAwesomeSwiper);
< /script>

3.vue-router

https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js

4.echarts

  • https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js
  • https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js
  • https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js
  • https://cdn.jsdelivr.net/npm/echarts/map/js/world.js

5.element-ui

https://unpkg.com/element-ui/lib/index.js

6.vue

  • vue2:
    https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js
  • vue3:
    https://unpkg.com/vue@3.2.31/dist/vue.global.js

7.vant

  • https://cdn.jsdelivr.net/npm/vant@next/lib/index.css
  • https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js

8.vuex

https://unpkg.com/vuex@next

9.moment

  • https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js
  • https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js

10.ant-design-vue

  • https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.css
  • https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.js

总结

到此这篇关于Vue如何使用cdn加载资源加快打包速度的文章就介绍到这了,更多相关Vue使用cdn加载资源内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 利用Vue Native构建移动应用的全过程记录

    利用Vue Native构建移动应用的全过程记录

    VueNative是一个使用JavaScript构建跨平台原生移动应用程序的框架m这篇文章主要给大家介绍了关于如何利用Vue Native构建移动应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-08-08
  • 基于Vue3+Three.js实现一个3D模型可视化编辑系统

    基于Vue3+Three.js实现一个3D模型可视化编辑系统

    这篇文章主要介绍了基于Vue3+Three.js实现一个3D模型可视化编辑系统,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 基于vue3&element-plus的暗黑模式实例详解

    基于vue3&element-plus的暗黑模式实例详解

    实现暗黑主题的方式有很多种,也有很多成型的框架可以直接使用,下面这篇文章主要给大家介绍了关于基于vue3&element-plus的暗黑模式的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue项目Network: unavailable的问题及解决

    vue项目Network: unavailable的问题及解决

    这篇文章主要介绍了vue项目Network: unavailable的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • 解析Vue.js中的组件

    解析Vue.js中的组件

    组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。这篇文章主要介绍了vue.js 中的组件，需要的朋友参考下
    2018-02-02
  • vue实现列表左右联动效果

    vue实现列表左右联动效果

    这篇文章主要为大家详细介绍了vue实现列表左右联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 对vuex中store和$store的区别说明

    对vuex中store和$store的区别说明

    这篇文章主要介绍了对vuex中store和$store的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 使用vue自定义指令开发表单验证插件validate.js

    使用vue自定义指令开发表单验证插件validate.js

    今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程,需要的朋友可以参考下
    2019-05-05
  • Vue使用babel-polyfill兼容IE解决白屏及语法报错问题

    Vue使用babel-polyfill兼容IE解决白屏及语法报错问题

    这篇文章主要介绍了Vue使用babel-polyfill兼容IE解决白屏及语法报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 在vue自定义组件中使用 v-model指令详情

    在vue自定义组件中使用 v-model指令详情

    这篇文章主要介绍了在vue自定义组件中使用 v-model指令详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-06-06

最新评论