vue项目中 CDN 是vue本身的依赖可以按需加载还是项目中所有的第三方库都可以按需加载？

已于 2023-12-13 09:10:19 修改
阅读量250 收藏
点赞数 1
文章标签： vue.js javascript 前端
于 2023-12-12 22:19:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/134960438
版权

这是我看到CDN简介时产生的问题
相信很多小伙伴会有 和我一样的疑问
在这里插入图片描述
在这里 我也统一回答一下

CDN（内容分发网络）是一种通过将数据分发到全球各个节点，以提供快速、可靠的内容传输的技术。在Vue项目中，CDN可以用于按需加载Vue本身及其相关依赖库。

在使用Vue时，你可以选择将Vue的核心库和常用插件等相关依赖通过CDN引入，从而实现按需加载。这样可以减小项目的文件体积，提高加载速度，并且由于使用了CDN，可以利用全球各地的节点来加快资源的传输。

除了Vue本身，你也可以选择将项目中的其他第三方依赖库通过CDN引入，以实现按需加载。这样可以根据需要，只加载项目中所需的依赖库，而不是全部加载。
在这里插入图片描述

需要注意的是，CDN的使用需要在项目的HTML文件中添加相应的CDN链接，并在Vue的配置中进行相应的修改。具体的使用方法可以参考Vue的官方文档或者其他相关的教程。

其实也可以简单理解为 只需要html引入了外部地址 所有第三方库都会按需慢加载

瑞晟技术服务中心-耿瑞
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目使用CDN优化首屏加载问题
11-26
前言 作为一个网站应用，加载速度是非常重要的。加载速度，一个是程序的合理安排，如以组件按需加载，一个是js、css等资源的异步加载。 在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。 外部的库文件，可以使用CDN资源，或者别的服务器资源等。
详解vue 配置 cdn 加载依赖的方法
csdn姚宏波
04-24 7134
前言 生产环境中，将项目依赖的一些第三方包替换成通过 cdn 方式外部加载，而不是打包到 vender，对于提升应用的加载、响应速度很有意义，下面我们一步步的实现这点 CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率 1. 查看打包后的资源情况 首先使用 build 命令打包，看看在使
vue项目中引用cdn资源与项目配置
weixin_44979432的博客
10-22 2427
一、CDN是什么 CDN（内容分发网络）本身是指一种请求资源的方式。说白了就是在本地，通过script头去请求对应的脚本资源的一种方式。我在这里要说的就是直接引用 或者下载Vue.js放在本地，进行项目开发的方式。而不是通过npm包管理工具去下载vue包。 二、配置 下面，以引入element-ui、vue、vuex、vue-router、axios为例，说明处理流程。 1. 在index.html中引入cdn资源. <link rel="stylesheet" href="https://cd
vue2 echarts按需加载
最新发布
weixin_44876807的博客
11-23 2461
新建echarts.js文件。
Vue.js快速入门 (cdn引入)
qq15035899256的博客
05-14 1万+
本文是对Vue的学习，重点帮助大伙完成从早期基于Dom开发，到Vue中基于数据开发的编程思路转换，除了Vue的基础语法之外，还包含了网络请求库axios的基本使用，中间穿插着5个精心设计的案例。之后的学习内容将持续更新！！！
vite+vue3+ts搭建项目八（打包性能优化三：使用CDN）
qq_23858785的博客
04-12 7220
解决：importToCDN时在引入vue后添加vue-demi，已在vite.config.ts中给出，其他插件在vue-demi之后（顺序很重要）直接按照下面这张方法是不行的，在vite.config.ts文件中，为importToCDN添加。这样就不需要手动引入了，但是需要添加一个新的npm包，实际项目中可以自行选择是否添加。需要注意的是，css可以使用本地的，使用本地的就不要添加css，输入对应名称，会自动跳转到对应的js文件，复制粘贴，，如上注释所示，其实是不需要的，：网上很多教程，还需要在。
前端CDN资源库，再也不用担心vue首次加载慢的问题了，vue项目必备cdn加速
03-01 6298
特推：unpkg.com/一个内容源自 npm 的全球快速 CDN BootCDN http://www.bootcdn.cn/ 目前前端开源的项目几乎都涵盖了，支持http和https。 百度静态资源公共库 http://cdn.code.baidu.com/一个是稳定，快速，全面，开源的国内CDN加速服务。 Staticfile CDN https://www.staticfile.org/基...
vue-cli项目优化方法- 缩短首屏加载时间
08-27
使用按需加载可以将 JS 文件拆开，只加载当前页面需要的 JS 文件。在 router.js 中，不要使用 import 的方法引入组件，使用 require.ensure。 三、使用 CDN 加速加载 使用 CDN 加速加载可以减少首屏加载时间。将 ...
详解如何在vue项目中使用layui框架及采坑
10-17
在Vue项目中集成layui框架可能遇到的挑战及解决方法 layui是一款流行的前端UI框架，它提供了丰富的组件和优雅的设计风格。然而，在Vue这样的现代前端框架中使用layui并不像在传统HTML页面中那样直接。本文将深入...
vue项目中用cdn优化的方法
08-28
vue项目中用cdn优化的方法 在 Vue 项目中，优化问题是不可忽视的...使用 CDN 优化可以提高 Vue 项目的页面加载速度和改善用户体验。本文详细介绍了如何在 Vue 项目中使用 CDN 优化的方法，希望对大家的学习有所帮助。
CDN内容分发网络（vue.js笔记）
dogeggcrazy的博客
11-26 555
的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开上有可能影响数据传输速度和稳定性的和环节，使内容传输得更快、更稳定。CDN的关键技术主要有内容存储和分发技术。CDN。于是，用户在上网的时候不用直接访问源站，而是访问离他“最近的”一个 CDN 节点，术语叫，其实就是缓存了源站内容的。
Vue入门（简介、CDN、v-model、v-on）
Kobe Bryant
08-16 715
简介 1. Vue.js是什么？ Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/中国无锡 2. 库和框架的区别 2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作，简化...
vue项目中使用CDN引入
热门推荐
编码世界
10-09 3万+
CDN（内容分发网络）指请求资源的方式，即通过script头去请求对应的脚本资源的一种方式，项目里配置之后不需要通过npm包管理工具去下载配置的包。 目的：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。 1. 在vue.config.js进行配置 本人对vue、vuex、vue-router、axios、element-ui、echarts进行了cdn引用。（请求e
vue-day01 使用cdn引入使用
m0_63622279的博客
11-19 6216
用于对不同的点击事件做不同的处理。一个简单的点击事件的例子：
vue的CDN用法
CrazyBoyKing的博客
10-11 5936
CDN用法比较简单，只需要引入vue的js文件就可以开始开发。 &lt;script type="text/javascript" src="https://unpkg.com/vue"&gt;&lt;/script&gt; 下面使用一些vue常用的特性 一：数据绑定 HTML代码 首先创建一个容器名字叫vue-app,然后绑定name这个变量，在HTML中渲染出来 &lt;div id="vu...
Vue项目优化，第三方JS用CDN引入
Wnig's Blog
05-09 5868
项目里用到的第三方插件比较多，打包时项目太大，之前是npm安装的，现在改为用CDN引入： element-ui和echarts组件相对较大，主要对这两个进行优化。 在index.html页面里,vue要放在前面，不然element-ui会报错 <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script&...
【Vue2.0|3.0 组件加载】按需加载
马云
01-10 879
文章目录v2 方法一：install的方式按需加载组件全局导入组件创建组件出口文件index.jsv2 方法二：解构的方式加载全局组件导入出口文件index.jsv3 下拉框组件组件导入组件搭建组件加载跟Vue2.0写法一样 v2 方法一：install的方式按需加载组件 全局导入组件 mian.js import MyUI from '../modules/my-ui'; Vue.use(MyUI, { components: [ 'MyButton', 'MyInput' ] });
VUE引入Echarts 打包文件过大——解决方法2：CDN引入
xiaozhuge_S
06-05 9407
小伙伴们注意啊！敲黑板了啊！ 由于在vue中按需引入echarts，虽然打包时比全局引入小了一半，但还是占很多内存。 所以经过不懈研究，发现了一个能让vue项目打包时更小的方法，就是CDN引入 CDN这个方法时真的很好用，打包之后发现基本没占啥空间。我所理解的CDN这个方法，就是相当于远程连接网上的资源，这么理解也不知道对不对哈～ 详细步骤如下： 在vue项目中的index.html文件里使用sc...
vue 项目直接加载vue相关的依赖
04-06
在Vue项目中，可以通过以下方式加载Vue相关的依赖： 1. 使用CDN引入Vue.js和Vue-router.js 在HTML文件的head标签中添加以下代码： ```html <!-- 加载Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- 加载Vue-router.js --> <script src="https://unpkg.com/vue-router@next"></script> ``` 2. 使用npm安装Vue.js和Vue-router.js 在命令行中进入Vue项目的根目录，执行以下命令安装Vue.js和Vue-router.js： ```bash npm install vue vue-router ``` 然后，在Vue项目的入口文件（通常是src/main.js）中，使用以下代码加载Vue.js和Vue-router.js： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' // 加载Vue-router.js Vue.use(VueRouter) ``` 通过以上两种方式，就可以加载Vue相关的依赖了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值