web必用的几个cdn引入文件

已于 2024-03-26 09:04:10 修改
阅读量362 收藏
点赞数 3
文章标签： 前端
于 2024-03-25 11:29:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41438254/article/details/137009212
版权
本文介绍了如何通过CDN从官方网站引入jQuery库，以及Bootstrap5.3alpha版本和AdminLTE前端框架的CSS和JS文件。这些资源被用于创建响应式网页设计。
摘要由CSDN通过智能技术生成

cdn引入jquery
https://www.staticfile.net/ 最新的cdn引入这个网站里
https://code.jquery.com/这个是jquery官网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CDN jQuery Example</title>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        // 使用jQuery
        $(document).ready(function(){
            $('body').append('<p>jQuery is loaded!</p>');
        });
    </script>
</body>
</html>

cdn引入bootsrap5.3

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

下面是adminlte前端框架
需要下载

<link href="https://cdn.bootcdn.net/ajax/libs/admin-lte/3.2.0/css/adminlte.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/admin-lte/3.2.0/css/adminlte.min.css" rel="stylesheet">

 <!-- Font Awesome -->
    <link rel="stylesheet" href="dist/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="dist/css/ionicons.min.css">
    <!-- Theme style -->
    <!-- AdminLTE App -->
    <link rel="stylesheet" href="dist/css/adminlte.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
qq_41438254
关注
【系统架构设计师】案例专题五：web应用开发考点梳理
数据知道的博客
10-10 2417
摘要：本文主要梳理系统架构设计师 - web应用开发 案例考点 ，主要包括Web应用技术分类、负载均衡、内容分发网络、微服务、缓存技术、XML和JSON、常见Web应用服务及设计等。
引入CDN
qq_28722667的博客
07-14 522
CDN（Content Delivery Network，内容分发网络）是通过将源站内容分发至靠近用户的加速节点，使用户可以就近获得所需的内容，解决Internet网络拥挤的状况，提高用户访问的响应速度和成功率，从而提升您业务的使用体验。您可以在CDN管理控制台添加加速域名，然后前往域名服务商处配置CNAME解析，即可启用CDN加速。还可以根据业务需要，为加速域名进行缓存、安全、性能优化配置，优化加速效果、缓解源站压力。
cdn引入
李振恒
05-07 2577
问题： weback打包工程后，由于初次加载页面时，页面加载时间过长； 原因是：查看F12，network一栏中，会发现chunk-vendors.e852d541.js这个chunk在页面加载时，会花费大量的时间；这个chunk是element-ui全部引入或部分引入，打包后生成的，体积很大； 解决方案： cdn引入配置 配置详情： public/index.html文件 <!DOCTYPE html> <html lang="en"> <head> &.
Vite + Vue3 使用 cdn 引入依赖，并且把外部 css、js 文件内联引入
前端，请指教
10-09 975
CDN 引入只有在 build 打包出来的才是 CDN 引入，本地开发走的还是 NPM 本地包引入， 所以先使用 NPM 方式引入。注意事项：element-plus 不能在 vite.config.js 中使用按需加载，需要在 main.js 中全局引入；，依赖变为 CDN 引入，外部的 js 文件和 css 文件集成到 index.html 中。
Vue3渐进式增强，运用CDN在项目中引入Vue3，超简单
m0_46313004的博客
02-06 5039
Vue3渐进式增强，运用CDN在项目中引入Vue3，超简单。根组件、组件通信、elementplus引入均有介绍。
引用jQuery库
ouhaochuan的专栏
10-25 473
如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。 使用 Google 的 CDN <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js">
src:CDN文件
03-18
使用CDN有以下几个主要优势： 1. **提高性能**：由于用户可以从最近的CDN节点获取内容，这大大降低了网络延迟，提高了页面加载速度，尤其是对于跨国访问的网站，效果尤为显著。 2. **减轻源站压力**：CDN可以分担...
【前台学习】H5进阶基础及各种框架的CDN引入
404name的博客
08-08 954
ajax基础调用 // json对象格式 $.ajax({ url:" ", type:"post", headers: { Accept: "application/json; charset=utf-8", Token: "XXXX" }, data:JSON.stringify({ adminId:adminId, password:password}), contentType: "appl.
cdn
03-27
CDN的工作原理主要包括以下几个步骤： 1. **用户请求**：当用户访问一个网站时，浏览器向网站的域名服务器发送请求。 2. **DNS解析**：域名服务器返回最近的CDN节点的IP地址。 3. **内容获取**：浏览器连接到最近的...
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
08-31
在上述描述的问题中，开发者发现使用Google CDN引入Bootstrap时，图标可以正常显示，而在本地引入Bootstrap文件时，图标却无法显示。这表明问题出在字体文件的路径或加载上。开发者通过`Ctrl+左键`检查`@font-face`...
vue优化首屏加载时间优化-cdn引入第三方包
路虽远行则将至，事虽难做则必成。
09-05 1808
为什么要进行首屏加载优化，因为随着我们静态资源和第三方包和代码增加，压缩之后包会越来越大随着网络的影响，在我们第一输入url请求资源时候，网络阻塞，加载时间长，用户体验不好仔细观察后就会发现，代码压缩之后并没有多大，大的都是项目自身，静态资源，第三方包除去代码层面我们可以通过静态图片网络请求，gzip压缩，CDN（第三方包引入方式），浏览器缓存当我们在本地开发，需要使用到别人的包的时候。通过npm下包。
以cdn链接形式引入外部依赖（三）
m0_52518047的博客
05-20 2085
在项目开发过程中，避免不了要使用各种各样的依赖，开发过程觉得没什么的，但是在打包的时候这些依赖体积过大，如下图所示：element-UI打包后占了1.28MB的体积，相当不小了。 有一种cdn引入方式，可以大大的避免这个问题。 每种依赖，登录它的官网，几乎都能看到这种CDN，在浏览器的输入框输入这个链接，你就明白了。 cdn引入其实一般分为两步： （1）在index.html中引入css或者js链接 <!DOCTYPE html> <html lang=""> <hea
第五章 静态资源 CDN 引入
JavaAlenboy
04-29 4924
第五章 静态资源 CDN 引入 静态请求 CDN 用户将静态资源数据请求到ECS服务器，ECS服务器解析到阿里云的CDN中，CDN可以理解为一个无限大的内容磁盘缓存，本身没有文件存储。当用户访问 getItem 的一个静态资源文件的时候，会根据路由规则查看本地是否有这样的文件，如果有直接返回，没有就回源到源站，回源到下面的OSS中获取静态资源文件。 CDN一边返回对应的文件，一边将文件按照http指示的生命周期缓存起来，以便下次用户访问时，直接返回。 Cache Control 响应头 Cache
Vue.js_02_引入（安装）
魏宇轩
04-27 551
本系列博客汇总在这里：Vue.js 汇总 引入（安装）一、CDN 引入（安装）二、下载引入（推荐） 源码工程文件为： 一、CDN 引入（安装） CDN 的全称是 Content Delivery Network，即内容分发网络。 CDN 的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正...
vue项目中使用CDN引入
zz130428的博客
12-25 1万+
CDN（内容分发网络）指请求资源的方式，即通过script头去请求对应的脚本资源的一种方式，项目里配置之后不需要通过npm包管理工具去下载配置的包。目的：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首页展示效果。
cdn引入前端插件
qq_38003260的博客
04-14 1091
注释掉的两个是因为不知道为什么这两个一但放出来就会报vue is not defined，如果有解决方法也请联系我，上述的一些cdn前端打包后已经缩小了3.5M左右还是很可观的；我单独创建了一个cdn的config文件命名cdn.config.js放在与vue.config.js同层。index.html中要配置否则上线后无法拉取相应的js，配置的东西要放在<body>中，且要在app前。在vue.config.js中导入cdn.config.js，具体配置如下。
Vue.js快速入门 (cdn引入)
热门推荐
qq15035899256的博客
05-14 1万+
本文是对Vue的学习，重点帮助大伙完成从早期基于Dom开发，到Vue中基于数据开发的编程思路转换，除了Vue的基础语法之外，还包含了网络请求库axios的基本使用，中间穿插着5个精心设计的案例。之后的学习内容将持续更新！！！
Vue2基础实例——实现移动端静态页面（CDN引入方式）
最新发布
千里之行，始于足下
10-24 992
Vue2基础实例——实现移动端静态页面（CDN引入方式）
前端必备：echarts.min.js文件的引入方法
2. 使用CDN引入：通过在HTML文件中添加CDN链接，直接从互联网上的内容分发网络引入 ECharts。这种方式简单快捷，无需本地存储 ECharts 文件。 3. 使用npm或yarn包管理器安装：在使用npm或yarn的项目中，可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值