react之unpkg.com前端资源加载慢、加载不出
文章目录
- react之unpkg.com前端资源加载慢
- 什么是unpkg.com
- 加载慢原因
- 解决方案
- 替换国内cdn
- 在 package.json 中打包进来
react之unpkg.com前端资源加载慢
什么是unpkg.com
unpkg 是一个内容源自 npm 的全球快速 CDN。
作为前端开发者,我们对 unpkg 都不陌生,它是一个基于 npm registry 的静态资源 CDN 服务。
它提供了一种快捷的静态资源访问能力,只需要遵循约定的 URL 进行访问,即可在页面中加载任意 npm 包里面的文件内容。虽然前端的开发模式已经不像当年那么的轻量的,往往需要用 webpack 等构建后进行部署。但在很多轻量的场景下,往往希望直接引入公共的 npm 包
加载慢原因
unpkg有时候会被墙了,unpkg上的相关资源都不能访问,才导致项目资源加载不出。
解决方案
替换国内cdn
在react项目 config/config.ts 中找到相关配置,关键字: unpkg.com
export default defineConfig({// 前端配置了 publicPath 为 /static/,那么前端应用程序在生产环境下应该通过 /static/ 路径来访问静态资源publicPath: process.env.NODE_ENV === 'production' ? '/static/' : '/',hash: true,antd: {},dva: {hmr: true,},// for Ant Design Charts https://pro.ant.design/zh-CN/docs/graphscripts: ['https://unpkg.com/react@17/umd/react.production.min.js','https://unpkg.com/react-dom@17/umd/react-dom.production.min.js','https://unpkg.com/@ant-design/charts@1.0.5/dist/charts.min.js',//使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用//'https://unpkg.com/@ant-design/charts@1.0.5/dist/charts_g6.min.js',],externals: {react: 'React','react-dom': 'ReactDOM',"@ant-design/charts": "charts"},
把 unpkg.com 换成国内cdn源。
把 unpkg.com 替换成unpkg.zhimg.com
在 package.json 中打包进来
可以将这些脚本的加载方式从外部 CDN 改为在 package.json 中打包进来。
config/config.ts 中找到相关配置,关键字: unpkg.com
scripts: [//全部注释掉,不使用cdn源,直接pacakge.json中引入// 'https://unpkg.com/react@17/umd/react.production.min.js',// 'https://unpkg.com/react-dom@17/umd/react-dom.production.min.js',// 'https://unpkg.com/@ant-design/charts@1.0.5/dist/charts.min.js',//使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用//'https://unpkg.com/@ant-design/charts@1.0.5/dist/charts_g6.min.js',],// externals 是 webpack 中的一个配置项,它允许你将一些模块标记为外部依赖,即不会被打包到最终的输出文件中。在这个配置项中,你可以将某些模块指定为外部依赖,并且指定他们在全局变量中的名称,这样在你的代码中使用这些模块时,webpack 就会从全局变量中引用它们,而不是将它们打包进输出文件中。externals: {// react: 'React',// 'react-dom': 'ReactDOM',// "@ant-design/charts": "charts"},
这段代码是用于加载所需的 JavaScript 库的脚本。scripts、externals的内容我们注释掉~
注意: externals 是 webpack 中的一个配置项,它允许你将一些模块标记为外部依赖,即不会被打包到最终的输出文件中。在这个配置项中,你可以将某些模块指定为外部依赖,并且指定他们在全局变量中的名称,这样在你的代码中使用这些模块时,webpack 就会从全局变量中引用它们,而不是将它们打包进输出文件中。
根据你注释的情况,安装包,比如根据上面,安装如下:
npm install react react-dom @ant-design/charts
在 React 应用中,通常会使用 react 和 react-dom 库来创建和渲染组件。而 @ant-design/charts 库是 Ant Design 提供的一个基于 G2Plot 的图表库,用于绘制各种类型的图表。
然后,打包前端
npm run build
相关文章:
react之unpkg.com前端资源加载慢、加载不出
文章目录 react之unpkg.com前端资源加载慢什么是unpkg.com加载慢原因解决方案替换国内cdn在 package.json 中打包进来 react之unpkg.com前端资源加载慢 什么是unpkg.com unpkg 是一个内容源自 npm 的全球快速 CDN。 作为前端开发者,我们对 unpkg 都不陌生&#x…...

C++类与对象【对象模型和this指针】
🌈个人主页:godspeed_lucip 🔥 系列专栏:C从基础到进阶 🎄1 C对象模型和this指针🌶️1.1 成员变量和成员函数分开存储🌶️1.2 this指针概念🌶️1.3 空指针访问成员函数🌶…...

策略模式在工作中的运用
前言 在不同的场景下,执行不同的业务逻辑,在日常工作中是很寻常的事情。比如,订阅系统。在收到阿里云的回调事件、与收到AWS的回调事件,无论是收到的参数,还是执行的逻辑都可能是不同的。为了避免,每次新增…...
【go】依赖倒置demo
文章目录 前言1 项目目录结构:2 初始化函数3 router4 api5 service6 dao7 Reference 前言 为降低代码耦合性,采用依赖注入的设计模式。原始请求路径:router -> api -> service -> dao。请求的为实际方法,具有层层依赖的…...
C++ //练习 2.5 指出下述字面值的数据类型并说明每一组内几种字面值的区别:
C Primer(第5版) 练习 2.5 练习 2.5 指出下述字面值的数据类型并说明每一组内几种字面值的区别: ( a ) ‘a’, L’a’, “a”, L"a" ( b ) 10, 10u, 10L, 10uL, 012, 0xC ( c ) 3.14, 3.14f, 3.14L ( d ) 10, 10u, 10., 10e-2…...

必示科技助力中国联通智网创新中心通过智能化运维(AIOps)通用能力成熟度3级评估
2023年12月15日,中国信息通信研究院隆重公布了智能化运维AIOps系列标准最新批次评估结果。 必示科技与中国联通智网创新中心合作的“智能IT故障监控定位分析能力建设项目”通过了中国信息通信研究院开展的《智能化运维能力成熟度系列标准 第1部分:通用能…...

python数字图像处理基础(九)——特征匹配
目录 蛮力匹配(ORB匹配)RANSAC算法全景图像拼接 蛮力匹配(ORB匹配) Brute-Force匹配非常简单,首先在第一幅图像中选取一个关键点然后依次与第二幅图像的每个关键点进行(描述符)距离测试&#x…...

k8s的对外服务ingress
1、service的作用体现在两个方面 (1)集群内部:不断跟踪pod的变化,更新deployment中的pod对象,基于pod的ip地址不断变化的一种服务发现机制 (2)集群外部:类似于负载均衡器ÿ…...

[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05-3+4
本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记 - Kalman Filter卡尔曼滤波器 Ch05-34 3. Step by step : Deriation of Kalmen Gain 卡尔曼增益/因数 详细推导4. Priori/Posterrori error Covariance Martix 误差协方差矩阵 3. Step by step :…...

关于前端面试中forEach方法的灵魂7问?
目录 前言 一、forEach方法支持处理异步函数吗? 二、forEach方法在循环过程中能中断吗? 三、forEach 在删除自己的元素后能重置索引吗? 四、forEach 的性能相比for循环哪个好? 五、使用 forEach 会不会改变原来的数组&#…...

AI小程序添加深度合成类目解决办法
基于文言一心和gpt等大模型做了一个ai助理小程序,在提交“一点AI助理”小程序时,审核如下: 失败原因1 审核失败原因 你好,你的小程序涉及提供提供文本深度合成技术 (如: AI问答) 等相关服务,请补充选择:深度…...

C/C++ BM6判断链表中是否有环
文章目录 前言题目解决方案一1.1 思路阐述1.2 源码 解决方案二2.1 思路阐述2.2 源码 总结 前言 做了一堆单链表单指针的题目,这次是个双指针题,这里双指针的作用非常明显。 题目 判断给定的链表中是否有环。如果有环则返回true,否则返回fal…...

【Java 设计模式】结构型之适配器模式
文章目录 1. 定义2. 应用场景3. 代码实现结语 适配器模式(Adapter Pattern)是一种结构型设计模式,用于将一个类的接口转换成客户端期望的另一个接口。这种模式使得原本由于接口不兼容而不能一起工作的类可以一起工作。在本文中,我…...

使用函数计算,数禾如何实现高效的数据处理?
作者:邱鑫鑫,王彬,牟柏旭 公司背景和业务 数禾科技以大数据和技术为驱动,为金融机构提供高效的智能零售金融解决方案,服务银行、信托、消费金融公司、保险、小贷公司等持牌金融机构,业务涵盖消费信贷、小…...

卷积和滤波对图像操作的区别
目录 问题引入 解释 卷积 滤波 问题引入 卷积和滤波是很相似的,都是利用了卷积核进行操作 那么他们之间有什么区别呢? 卷积:会影响原图大小 滤波:不会影响原图大小 解释 卷积 我们用这样一段代码来看 import torch.nn as …...
李沐深度学习-线性回归从零开始
# 核心Tensor,autograd import torch from IPython import display import numpy as np import random from matplotlib import pyplot as pltimport syssys.path.append(路径) from d2lzh_pytorch import * backward()函数:一次小批量执行完在进行反向传播 线性回归…...

CentOS 8.5 安装图解
特特特别的说明 CentOS发行版已经不再适合应用于生产环境,客观条件不得不用的话,优选7.9版本,8.5版本次之,最次6.10版本(比如说Oracle 11GR2就建议在6版本上部署)! 引导和开始安装 选择倒计时结…...

好用的流程图工具
分享工作中常用的装逼工具 目前市面上的流程图或者思维导图工具挺多的,但是有的会限制使用数量或者收费,典型的有processon、Xmind,推荐今天Mermaid(官网)。 快速上手 中文教程:Mermaid 初学者用户指南 | Mermaid 中文网。我们选择…...

数据结构:链式栈
stack.h /* * 文件名称:stack.h * 创 建 者:cxy * 创建日期:2024年01月18日 * 描 述: */ #ifndef _STACK_H #define _STACK_H#include <stdio.h> #include <stdlib.h>typedef struct stack{int data…...
openssl3.2 - 官方demo学习 - mac - gmac.c
文章目录 openssl3.2 - 官方demo学习 - mac - gmac.c概述笔记END openssl3.2 - 官方demo学习 - mac - gmac.c 概述 使用GMAC算法, 设置参数(指定加密算法 e.g. AES-128-GCM, 设置iv) 用key执行初始化, 然后对明文生成MAC数据 官方注释给出建议, key, iv最好不要硬编码出现在程…...

.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...

微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

tauri项目,如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值,可以通过标准的依赖: std::env::var(name).ok() 想在前端通过调用来获取,可以写一个command函数: #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...