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

【React】打包优化-配置CDN

news 2026/4/9 6:44:53

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

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

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

项目中怎么做？

  1. 把需要做CDN缓存的文件排除在打包之外（react、 react-dom)
  2. 以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 是一种内容分发网络服务&#xff0c;当用户请求网站内容时&#xff0c;由离用户最近的服务器将缓存的资源内容传递给用户。 哪些资源可以放到CDN服务器&#xff1f;&#xff08;比如react、 react-dom&#xff09; 体积较大&#xff0c;需要利用CDN文件在浏览器的缓存特性…...

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

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

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

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

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

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

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

网络篇---第三篇

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

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

tensorflow和pytorch的联系与区别

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

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

为什么选择美国VPS服务器

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

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

StarRocks Evolution：One Data，All Analytics

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

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

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

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

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

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

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

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

3.golang数组以及切片

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

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

ElasticSearch02

ElasticSearch客户端操作 ElasticSearch 版本&#xff1a;7.8 学习视频&#xff1a;尚硅谷 笔记&#xff1a;https://zgtsky.top/ 实际开发中&#xff0c;主要有三种方式可以作为elasticsearch服务的客户端&#xff1a; 第一种&#xff0c;使用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

机器学习探索计划——KNN实现Iris鸢尾花分类

文章目录 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&#xff08;简称TS&#xff09;的基础上&#xff0c;扩展了声明式UI、状态管理等相应的能力&#xff0c;让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript&#xff08;简称JS&#xff09;的超…...

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

使用脚手架创建Vue3项目

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Vue ✨特色专栏&#xff1a; MySQL学习…...

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

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

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

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

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

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

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

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

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

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

Qwen3-Reranker-0.6B效果展示：中英文跨语言语义重排惊艳案例集

Qwen3-Reranker-0.6B效果展示&#xff1a;中英文跨语言语义重排惊艳案例集 1. 模型能力概览 Qwen3-Reranker-0.6B 是阿里云通义千问团队推出的新一代文本重排序模型&#xff0c;专门为文本检索和排序任务设计。这个模型虽然只有0.6B参数&#xff0c;但在语义相关性判断方面表…...

编程新知 2026/4/9 6:11:01

OpenClaw云端体验版：Phi-3-vision-128k-instruct沙盒环境快速验证

OpenClaw云端体验版&#xff1a;Phi-3-vision-128k-instruct沙盒环境快速验证 1. 为什么选择云端沙盒体验 当我第一次听说OpenClaw时&#xff0c;就被它"让AI像人类一样操作电脑"的理念吸引了。但作为一个谨慎的技术人&#xff0c;我习惯在正式投入时间前先做可行性…...

编程新知 2026/4/9 5:58:40

OpenClaw自动化测试：千问3.5-35B-A3B-FP8多模态任务可靠性验证方法

OpenClaw自动化测试&#xff1a;千问3.5-35B-A3B-FP8多模态任务可靠性验证方法 1. 为什么需要系统性测试多模态模型 上周我在调试一个自动整理图片的OpenClaw工作流时&#xff0c;遇到了诡异的现象——AI助手把会议白板照片里的流程图误识别成了"披萨制作步骤"。这…...

编程新知 2026/4/9 5:46:25

通义千问1.5-1.8B-Chat-GPTQ-Int4一键部署效果展示：低显存占用下的流畅对话体验

通义千问1.5-1.8B-Chat-GPTQ-Int4一键部署效果展示&#xff1a;低显存占用下的流畅对话体验 最近在尝试各种轻量级大模型本地部署&#xff0c;一个绕不开的痛点就是显存。动不动就十几GB的显存需求&#xff0c;让很多只有一张普通消费级显卡的朋友望而却步。正好&#xff0c;我…...

编程新知 2026/4/9 5:38:05

项目环境的搭建，项目的初步使用和deepseek的初步认识

1.环境搭建这个项目使用的是字节旗下的trae开发环境项目开始前首先得连接远程终端&#xff0c;要么是虚拟机要么是云服务器从远端克隆完头文件后再到本地来编译 编译完成后要将编译好的库文件以及头文件进行安装 安装到系统的根目录 这样以后用可以找到这样用到的头文件就拷贝…...

编程新知 2026/4/9 5:30:01

终极指南：如何高效使用geerlingguy/dotfiles提升开发效率

终极指南&#xff1a;如何高效使用geerlingguy/dotfiles提升开发效率 【免费下载链接】dotfiles My configuration. Minimalist, but helps save a few thousand keystrokes a day. 项目地址: https://gitcode.com/gh_mirrors/dotfiles52/dotfiles 在软件开发领域&#…...

编程新知 2026/4/9 4:22:30

浏览器神器Tampermonkey：手把手教你安装和使用4款必备油猴脚本

Tampermonkey进阶指南&#xff1a;解锁浏览器潜能的4个实战脚本方案 每次遇到网页限制复制、强制登录、内容折叠这些烦人的设计时&#xff0c;我都习惯性地点开浏览器右上角那个猴子图标。作为从业十年的前端开发者&#xff0c;我可以负责任地说&#xff1a;Tampermonkey是浏览…...

编程新知 2026/4/9 4:04:19

STM32时钟系统解析与启动配置实践

1. STM32单片机启动时的时钟源选择机制刚接触STM32开发时&#xff0c;我总有个疑问&#xff1a;在main函数执行前&#xff0c;单片机是怎么跑起来的&#xff1f;特别是在我们还没配置系统时钟之前&#xff0c;CPU靠什么时钟在工作&#xff1f;这个问题困扰了我很久&#xff0c;…...

编程新知 2026/4/9 1:19:22

初次学C语言编程（2）

上节课内容补充在上节课中的转义字符中\ddd 表示一个三个数字的八进制的数字 例如\130 十进制的ASCII是88 表示字符X\xdd表示的是一个两个数字的十六进制的数字 例如\x30 十进制ASCII是48 表示字符0\0表示null 没有字符 ASCII码是0&#xff0c;用于字符串的结束符号一、C…...

编程新知 2026/4/9 1:05:04

AI 工程化实战：从零手搓代码，这一次彻底搞懂MCP！卵

简介 langchain中提供的chain链组件&#xff0c;能够帮助我门快速的实现各个组件的流水线式的调用&#xff0c;和模型的问答 Chain链的组成 根据查阅的资料&#xff0c;langchain的chain链结构如下&#xff1a; $$Input \rightarrow Prompt \rightarrow Model \rightarrow Outp…...

编程新知 2026/4/9 1:01:01