当前位置：首页 > news >正文

【React】打包优化-配置CDN

news 2025/11/22 12:32:53

CDN 是一种内容分发网络服务，当用户请求网站内容时，由离用户最近的服务器将缓存的资源内容传递给用户。

哪些资源可以放到CDN服务器？（比如react、 react-dom）

体积较大，需要利用CDN文件在浏览器的缓存特性，加快加载时间
非业务JS文件，不需要经常做变动，CDN不用频繁更新缓存

项目中怎么做？

把需要做CDN缓存的文件排除在打包之外（react、 react-dom)
以CDN的方式重新引入资源（react、react-dom)

// ``craco.config.js``// 添加自定义对于webpack的配置const path = require('path')
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')module.exports = {// webpack 配置webpack: {// 配置别名alias: {// 约定：使用 @ 表示 src 文件所在路径'@': path.resolve(__dirname, 'src')},// 配置webpack// 配置CDNconfigure: (webpackConfig) => {let cdn = {js:[]}// 当前是否是生产环境，只有生产环境才需要 CDNwhenProd(() => {// key: 不参与打包的包(由dependencies依赖项中的key决定)// value: cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下webpackConfig.externals = {react: 'React','react-dom': 'ReactDOM'}// 配置现成的cdn资源地址// 实际开发的时候 用公司自己花钱买的cdn服务器cdn = {js: ['https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js','https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js',]}})// 通过 htmlWebpackPlugin 插件 在 public/index.html 注入 cdn 资源 urlconst { isFound, match } = getPlugin(webpackConfig,pluginByName('HtmlWebpackPlugin'))if (isFound) {// 找到了 HtmlWebpackPlugin 的插件match.userOptions.files = cdn}return webpackConfig}}
}

// public/index.html<body><div id="root"></div><!-- 加载第三发包的 CDN 链接 --><% htmlWebpackPlugin.options.files.js.forEach(cdnURL => { %><script src="<%= cdnURL %>"></script><% }) %>
</body>

【React】打包优化-配置CDN

CDN 是一种内容分发网络服务，当用户请求网站内容时，由离用户最近的服务器将缓存的资源内容传递给用户。哪些资源可以放到CDN服务器？（比如react、 react-dom） 体积较大，需要利用CDN文件在浏览器的缓存特性…...

编程日记 2023/11/27 16:45:18

上手 Promethus - 开源监控、报警工具包

名词解释 Promethus 是什么开源的【系统监控和警报】工具包专注于： 1）可靠的实时监控 2）收集时间序列数据 3）提供强大的查询语言（PromQL），用于分析这些数据功能： 1&#xff0…...

编程日记 2023/11/27 16:44:16

Linux学习教程（第十二章 Linux系统管理）三

第十二章 Linux系统管理（进程管理、工作管理和系统定时任务）（三） 十九、Linux 定时执行任务（at命令） Linux at命令详解：定时执行任务要想使用 at 命令，读者需提前安装好 at 软件…...

编程日记 2023/11/27 16:41:12

网络篇---第三篇

系列文章目录文章目录系列文章目录前言一、说一下HTTP的长连接与短连接的区别二、TCP 为什么要三次握手，两次不行吗？为什么？三、说一下 TCP 粘包是怎么产生的？怎么解决粘包问题的？前言前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大…...

编程日记 2023/11/27 16:40:11

tensorflow和pytorch的联系与区别

TensorFlow和PyTorch是两个流行的深度学习框架，它们在很多方面都有相似之处，因为它们都旨在解决相同的问题，即构建和训练神经网络。以下是它们之间的一些联系： 1.深度学习框架： TensorFlow和PyTorch都是开源的深度学…...

编程日记 2023/11/27 16:39:10

为什么选择美国VPS服务器

企业、个人和组织都需要一个稳定高效的服务器来托管他们的网站、应用程序和数据。而对于中国用户来说，寻找一个性价比高的便宜美国VPS服务器，既能满足需求，又能节约成本，成为了一个非常重要的问题。 VPS即虚拟专用服务器&#xf…...

编程日记 2023/11/27 16:38:09

StarRocks Evolution：One Data，All Analytics

在 11 月 17 日举行的 StarRocks Summit 2023上，StarRocks TSC Member、镜舟科技 CTO 张友东详细介绍了 StarRocks 社区的发展情况，并全面解析了 StarRocks 的核心技术与未来规划；我们特意将他的精彩演讲整理出来，以帮助大家更深入…...

编程日记 2023/11/27 16:37:08

微信小程序富文本拓展rich-text

微信小程序富文本插件功能介绍支持解析<style>标签中的全局样式支持自定义默认的标签样式支持自动设置标题若html中存在title标签，将自动把title标签的内容设置到页面的标题上，并在回调bindparse中返回，可以用于转发支持添加加载提示可以在Parser标签内添加加载提…...

编程日记 2023/11/27 16:35:05

Postman：专业API测试工具，提升Mac用户体验

如果你是一名开发人员或测试工程师，那么你一定知道Postman。这是一个广泛使用的API测试工具，适用于Windows、Mac和Linux系统。今天，我们要重点介绍Postman的Mac版本，以及为什么它是你进行API测试的理想选择。一、强大的功能和易…...

编程日记 2023/11/27 16:34:03

3.golang数组以及切片

数组数组的声明数组是具有相同唯一类型的一组以编号且长度固定的数据项序列。一个数组的表示形式为 T[n]。n 表示数组中元素的数量，T 代表每个元素的类型。 var a [3]int fmt.Println(a)var a[3]int 声明了一个长度为 3 的整型数组。数组中的所有元素都被自动…...

编程日记 2023/11/27 16:33:02

ElasticSearch02

ElasticSearch客户端操作 ElasticSearch 版本：7.8 学习视频：尚硅谷笔记：https://zgtsky.top/ 实际开发中，主要有三种方式可以作为elasticsearch服务的客户端： 第一种，使用elasticsearch提供的Restful接口…...

编程日记 2023/11/27 16:32:00

比特币挖矿过程，双花攻击，女巫攻击，DID聚合身份

目录比特币挖矿过程双花攻击双花攻击的原理双花攻击的类型双花攻击防范措施:...

编程日记 2023/11/27 16:30:59

加载minio中存储的静态文件html,不显示样式与js

问题描述:点击链接获取的就是纯静态文件,但是通过浏览器可以看到明明加载了css文件与js文件原因:仔细看你会发现加载css文件显示的contentType:text/html文件,原来是minio上传文件时将所有文件的contentType设置成了text/html 要在上传时指定文件,根据文章的类型指定的Conten…...

编程日记 2023/11/27 16:29:57

kali安装内网穿透工具并实现ssh远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试简单几步通过[cpolar 内网穿透](cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站)软件实现ssh远程连接kali 1…...

编程日记 2023/11/27 16:28:56

文章目录 1. 加载数据集2.拆分数据集3.预测4.评价 1. 加载数据集 import numpy as np from sklearn import datasetsiris datasets.load_iris()iris.keys()dict_keys([data, target, frame, target_names, DESCR, feature_names, filename, data_module])X iris.data X.shap…...

编程日记 2023/11/27 16:27:55

鸿蒙(HarmonyOS)应用开发——装饰器

简介 ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，扩展了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript（简称JS）的超…...

编程日记 2023/11/27 16:26:54

使用脚手架创建Vue3项目

✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉 🍎个人主页：Leo的博客 💞当前专栏： Vue ✨特色专栏： MySQL学习…...

编程日记 2023/11/27 16:25:54

SpringBoot 2 系列停止维护，Java8 党何去何从？

SpringBoot 2.x 版本正式停止更新维护，官方将不再提供对 JDK8 版本的支持 SpringBoot Logo 版本的新特性 3.2 版本正式发布，亮点包括： 支持 JDK17、JDK21 版本对虚拟线程的完整支持 JVM Checkpoint Restore（Project CRaC&…...

编程日记 2023/11/27 16:24:53

Cadence Vmanager vsif文件编写指南（持续更新...）

目录 1.NTF格式介绍 1.1.1 {属性：值}定义 1.1.2类别 1.1.3语法 2.vsif文件中有效的container 2.1 session {…} 1.NTF格式介绍 Cadence的Vmanager工具采用vsif类型的文件作为regression的输入文件，采用vplanx/csv类型的文件作为vplan的输入文件&am…...

编程日记 2023/11/27 16:23:52

html实现我的故乡，城市介绍网站(附源码)

文章目录 1. 我生活的城市北京（网站）1.1 首页1.2 关于北京1.3 北京文化1.4 加入北京1.5 北京景点1.6 北京美食1.7 联系我们 2.效果和源码2.1 动态效果2.2 源代码源码下载作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43…...

编程日记 2023/11/27 16:22:50

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/9/30 14:27:04

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据准备一个容器,例如: …...

编程新知 2025/11/17 14:07:59