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

webpack CDN打包优化

article 2025/6/3 16:50:44

CDN网络分发服务 请求资源时最近的服务器将缓存内容交给用户

体积较大且变动不多的文件存在CDN文件中 react react-dom资源

在这里插入图片描述

// 添加自定义对于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:[]}whenProd(() => {// 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}}
}

index.js中

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

相关文章：

webpack CDN打包优化

CDN网络分发服务 请求资源时最近的服务器将缓存内容交给用户 体积较大且变动不多的文件存在CDN文件中 react react-dom资源 // 添加自定义对于webpack的配置const path require(path) const { whenProd, getPlugin, pluginByName } require(craco/craco)module.exports {//…...

编程日记 2025/6/3 16:50:44

ARM内核一览

经常看介绍某某牛批芯片用的又是ARM什么核&#xff0c;看的云里雾里&#xff0c;所以简单整理整理。&#xff08;内容来自官网和GPT&#xff09; 1 ARM 内核总体分类 系列特点应用场景Cortex-M超低功耗、低成本、实时性嵌入式系统、微控制器、IoTCortex-R高可靠性、硬实时汽车…...

编程日记 2025/6/3 4:37:15

Rust 和 Python 如何混合使用

Rust 与 Python 可以通过多种方式混合使用&#xff0c;如 FFI 接口、PyO3 库、CFFI、CPython API、wasm 模块嵌入等。这种混合开发模式可结合 Rust 的性能优势与 Python 的开发效率。其中&#xff0c;PyO3 是目前最受欢迎的桥接工具&#xff0c;它允许使用 Rust 编写 Python 扩…...

编程日记 2025/6/3 8:47:26

台式电脑CPU天梯图_2025年台式电脑CPU天梯图

CPU的选择绝对是重中之重，它关乎了一台电脑性能好坏。相信不少用户，在挑选CPU的时候不知道谁强谁弱，尤其是intel和AMD两款CPU之间。下面通过2025年台式电脑CPU天梯图来了解下这两款cpu. 2025年台式电脑CPU天梯图 2025年台式电脑CPU天梯图包含了老旧型号以及12代、13代、14代…...

编程日记 2025/6/3 7:28:30

2025年渗透测试面试题总结-匿名[校招]安全服务工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 匿名[校招]安全服务工程师 一面问题与完整回答 1. 学校、专业、成绩与排名 2. 学习安全时长 3. 当前学习…...

编程日记 2025/6/2 1:33:26

Deseq2：MAG相对丰度差异检验

首先使用代码将contigs和MAG联系起来 https://github.com/MrOlm/drep/blob/master/helper_scripts/parse_stb.py ~/parse_stb.py --reverse -f ~/bin_dir/* -o ~/bin_dir/genomes.stb # 查看第一列的contigs有没有重复&#xff08;重复的话会影响后续比对&#xff09; awk {p…...

编程日记 2025/6/3 5:08:54

CTFHub-RCE 命令注入-过滤目录分隔符

观察源代码 代码里面可以发现过滤了目录分隔符\和/ 判断是Windows还是Linux 源代码中有 ping -c 4 说明是Linux 查看有哪些文件 127.0.0.1|ls 打开flag文件 发现存在一个flag_is_here的文件夹&#xff0c;我们需要打开这个文件夹找到目标文件我们尝试分步&#xff0c;先利…...

编程日记 2025/6/3 8:38:14

从零开始的数据结构教程（七） 回溯算法

&#x1f504; 标题一&#xff1a;回溯核心思想——走迷宫时的“穷举回头”策略 回溯算法 (Backtracking) 是一种通过探索所有可能的候选解来找出所有的解或某些解的算法。它就像你在一个复杂的迷宫中寻找出路&#xff1a;当你遇到一个岔路口时&#xff0c;你会选择一条路继续…...

编程日记 2025/6/3 16:58:55

CentOS-stream-9 Zabbix的安装与配置

一、Web环境搭建部署Zabbix时&#xff0c;选择合适的MariaDB、PHP和Nginx版本非常重要&#xff0c;以确保兼容性和最佳性能。以下是建议版本&#xff1a;Zabbix 6.4 MariaDB&#xff1a;官方文档推荐使用MariaDB 10.3或更高版本。对于CentOS Stream 9&#xff0c;建议使用Maria…...

编程日记 2025/6/2 1:29:22

开源是什么？我们为什么要开源？

本片为故事类文章推荐听音频哦 软件自由运动的背景 梦开始的地方 20世纪70年代&#xff0c;软件行业处于早期发展阶段&#xff0c;软件通常与硬件捆绑销售&#xff0c;用户对软件的使用、修改和分发权利非常有限。随着计算机技术的发展和互联网的普及&#xff0c;越来越多的开…...

编程日记 2025/6/3 16:53:22

【unity游戏开发——编辑器扩展】EditorApplication公共类处理编辑器生命周期事件、播放模式控制以及各种编辑器状态查询

注意&#xff1a;考虑到编辑器扩展的内容比较多&#xff0c;我将编辑器扩展的内容分开&#xff0c;并全部整合放在【unity游戏开发——编辑器扩展】专栏里&#xff0c;感兴趣的小伙伴可以前往逐一查看学习。 文章目录 前言一、监听编辑器事件1、常用编辑器事件2、示例监听播放模…...

编程日记 2025/6/2 1:27:18

elasticsearch低频字段优化

在Elasticsearch中&#xff0c;通过设置"index": false关闭低频字段的倒排索引构建是常见的优化手段&#xff0c;以下是关键要点&#xff1a; 一、核心机制 ‌倒排索引禁用‌ 设置index: false后&#xff0c;字段不会生成倒排索引&#xff0c;无法通过常规查…...

编程日记 2025/6/3 17:01:07

React---day3

React 2.5 jsx的本质 jsx 仅仅只是 React.createElement(component, props, …children) 函数的语法糖。所有的jsx最终都会被转换成React.createElement的函数调用。 createElement需要传递三个参数&#xff1a; 参数一&#xff1a;type 当前ReactElement的类型&#xff1b;…...

编程日记 2025/6/3 8:24:30

PyCharm接入DeepSeek，实现高效AI编程

介绍本土AI工具DeepSeek如何结合PyCharm同样实现该功能。 一 DeepSeek API申请 首先进入DeepSeek官网&#xff1a;DeepSeek 官网 接着点击右上角的 “API 开放平台“ 然后点击API keys 创建好的API key&#xff0c;记得复制保存好 二 pycharm 接入deepseek 首先打开PyCh…...

编程日记 2025/6/3 16:48:24

前端面经 get和post区别

get获取数据 post提交资源&#xff0c;引起服务器状态变化或者副作用 区别 1get会比post更不安全 get参数写在url中 post在请求体内 2get报文 head和body一起发 响应200 post报文 先发head 100 再发 body 200 3 get请求url有长度限制 4 默认缓存get 请求...

编程日记 2025/6/3 17:10:52

CTFSHOW-WEB-36D杯

给你shell 这道题对我这个新手还是有难度的&#xff0c;花了不少时间。首先f12看源码&#xff0c;看到?view_source&#xff0c;点进去看源码 <?php //Its no need to use scanner. Of course if you want, but u will find nothing. error_reporting(0); include "…...

编程日记 2025/6/3 6:19:07

MySQL connection close 后， mysql server上的行为是什么

本文着重讲述的是通过 msql client 连接到 mysql server &#xff0c;发起 update 、 select 操作(由于数据量非常大&#xff0c;所以 update、select 操作都很耗时&#xff0c;即在结果返回前我们有足够的时间执行一些操作) 。 在客户端分别尝试执行 ctrl C 结束关闭 mysql c…...

编程日记 2025/6/3 16:58:55

RabbitMQ vs MQTT：深入比较与最新发展

RabbitMQ vs MQTT&#xff1a;深入比较与最新发展 引言 在消息队列和物联网&#xff08;IoT&#xff09;通信领域&#xff0c;RabbitMQ 和 MQTT 是两种备受瞩目的技术&#xff0c;各自针对不同的需求和场景提供了强大的解决方案。随着 2025 年的到来&#xff0c;这两项技术都…...

编程日记 2025/6/3 17:13:32

金砖国家人工智能高级别论坛在巴西召开，华院计算应邀出席并发表主题演讲

当地时间5月20日&#xff0c;由中华人民共和国工业和信息化部&#xff0c;巴西发展、工业、贸易与服务部&#xff0c;巴西公共服务管理和创新部以及巴西科技创新部联合举办的金砖国家人工智能高级别论坛&#xff0c;在巴西首都巴西利亚举行。 中华人民共和国工业和信息化部副部…...

编程日记 2025/6/3 8:13:44

【KWDB 创作者计划】_再热垃圾发电汽轮机仿真与监控系统：KaiwuDB 批量插入10万条数据性能优化实践

再热垃圾发电汽轮机仿真与监控系统&#xff1a;KaiwuDB 批量插入10万条数据性能优化实践 我是一台N25-3.82/390型汽轮机&#xff0c;心脏在5500转/分的轰鸣中跳动。垃圾焚烧炉是我的胃&#xff0c;将人类遗弃的残渣转化为金色蒸汽&#xff0c;沿管道涌入我的胸腔。 清晨&#x…...

编程日记 2025/6/3 10:38:42

CentOS 7 安装docker缺少slirp4netnsy依赖解决方案

CentOS 7安装docker缺少slirp4netnsy依赖解决方案 Error: Package: docker-ce-rootless-extras-26.1.4-1.el7.x86_64 (docker-ce-stable) Requires: slirp4netns > 0.4 Error: Package: docker-ce-rootless-extras-26.1.4-1.el7.x86_64 (docker-ce-stable) 解决方案 若wge…...

编程日记 2025/6/3 17:01:08

Android第十一次面试多线程篇

​面试官​&#xff1a; “你在项目里用过Handler吗&#xff1f;能说说它是怎么工作的吗&#xff1f;” ​候选人​&#xff1a; “当然用过&#xff01;比如之前做下载功能时&#xff0c;需要在后台线程下载文件&#xff0c;然后在主线程更新进度条。这时候就得用Handler来切…...

编程日记 2025/6/3 7:15:07

安全，稳定可靠的政企即时通讯数字化平台

在当今数字化时代&#xff0c;政企机构面临着复杂多变的业务需求和日益增长的沟通协作挑战。BeeWorks作为一款安全&#xff0c;稳定可靠的政企即时通讯数字化平台&#xff0c;凭借其安全可靠、功能强大的特性&#xff0c;为政企提供了高效、便捷的沟通协作解决方案&#xff0c;…...

编程日记 2025/6/3 17:01:24

craw4ai 抓取实时信息，与 mt4外行行情结合实时交易，基本面来觉得趋势方向，搞一个外汇交易策略

结合实时信息抓取、MT4行情数据、基本面分析的外汇交易策略框架&#xff0c;旨在通过多维度数据融合提升交易决策质量&#xff1a;行不行不知道先试试&#xff0c;理论是对的&#xff0c;只要基本面方向没错 策略名称&#xff1a;Tri-Sync 外汇交易系统 核心理念 「基本面定方…...

编程日记 2025/6/3 16:31:37

Linux之守护进程

在Linux系统中&#xff0c;进程一般分为前台进程、后台进程和守护进程3类。 一 守护进程 定义: 1.守护进程是在操作系统后台运行的一种特殊类型的进程&#xff0c;它独立于前台用户界面&#xff0c;不与任何终端设备直接关联。这些进程通常在系统启动时启动&#xff0c;并持…...

编程日记 2025/6/3 16:40:04

LiquiGen流体导入UE

导出ABC 导出贴图 ABC导入Houdini UE安装SideFX_Labs插件 C:\Users\Star\Documents\houdini20.5\SideFXLabs\unreal\5.5 参考: LiquiGenHoudiniUE血液流程_哔哩哔哩_bilibili...

编程日记 2025/6/3 7:10:23

使用react进行用户管理系统

今天通了一遍使用react进行用户管理系统的文档&#xff0c;以及跟随步骤实现了一遍&#xff0c;我大概梳理一下实现思路。 首先我们构建基本用户管理应用&#xff0c;需要数据库存储个人资料&#xff0c;我们先去supabase注册然后创建自己的数据库然后设置密码&#xff0c;然后…...

编程日记 2025/6/3 6:49:07

SpringBoot的java应用中，慢sql会导致CPU暴增吗

是的&#xff0c;在 Spring Boot 的 Java 应用中&#xff0c;慢 SQL 同样可能导致 CPU 暴增。虽然数据库服务器的 CPU 通常是主要压力点&#xff0c;但应用服务器&#xff08;Java 进程&#xff09;的 CPU 也可能间接受到影响&#xff0c;具体原因和机制如下&#xff1a; 1. 数…...

编程日记 2025/6/3 2:51:31

Ubuntu下编译mininim游戏全攻略

目录 一、安装mininim 软件所依赖的库&#xff08;重点是allegro游戏引擎库&#xff09;二、编译mininim 软件三、将mininim打包给另一个Ubuntu系统使用四、安卓手机运行mininim 一、安装mininim 软件所依赖的库&#xff08;重点是allegro游戏引擎库&#xff09; 1. 用apt-get…...

编程日记 2025/6/3 17:29:44

uniapp uni-id Error: Invalid password secret

common文件夹下uni-config-center文件夹下新建uni-id,新建config.json文件 复制粘贴以下代码&#xff0c;不要自己改&#xff0c;格式容易错 {"passwordSecret": [{"type": "hmac-sha256","version": 1}], "passwordStrength&qu…...

编程日记 2025/6/3 16:46:17