Vite和Webpack如何使用CDN包

为了精简打包输出的dist目录大小,我们可以引入CDN外部包的方式,来缩小打包的体积,加快打包速度。这里介绍ViteWebpack中如何引入React CDN外部包

一、Vite引入CDN包

1、安装插件

npm i @vitejs/plugin-react-refresh vite-plugin-cdn-import -D

如何之前在package.json有安装react,要记得清除。

2、手动配置

// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN from 'vite-plugin-cdn-import'export default {plugins: [importToCDN({modules: [{name: 'react',var: 'React',path: `umd/react.production.min.js`,},{name: 'react-dom',var: 'ReactDOM',path: `umd/react-dom.production.min.js`,},],}),],
}
  • name:模块名,也就是在项目中import引入时的包名,例如:import React, { useState } from 'react';
  • var:cdn外部包var方式定义的全局变量名。
  • path:cdn外部包的地址。

3、自动配置

// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'export default {plugins: [importToCDN({modules: [autoComplete('react'),autoComplete('react-dom')],}),reactRefresh(),],
}

自动配置支持的包:

"react" | "react-dom" | "react-router-dom" | 
"antd" | "ahooks" | "@ant-design/charts" | 
"vue" | "vue2" | "@vueuse/shared" | 
"@vueuse/core" | "moment" | 
"eventemitter3" | "file-saver" | 
"browser-md5-file" | "xlsx | "crypto-js" |
"axios" | "lodash" | "localforage"

二、Webpack引入CDN包

如何之前在package.json有安装react,要记得清除。

1、配置 config/config.js

export default defineConfig({// webpack5: {//   externals: {//     react: "React"//   }// },chainWebpack(config) {config.externals({// '模块名': '全局变量名'react: 'React',});}
})

2、修改html模版

打开src\pages\document.ejs,在标签中引入下面文件:

<script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>

三、CDN开源包仓库

推荐CDN包仓库:https://www.bootcdn.cn/react/
推荐使用UMD版本,例如:
在这里插入图片描述

  • UMM:UMD版本通用的模块版本,支持多种模块方式
  • EJS:CommonJS-多用于Nodejs项目。
  • ESM:ECMAScript Modules,基于es6中esmodule静态引入机制。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/132410.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无涯教程-JavaScript - BESSELK函数

描述 BESSELK函数返回修改后的Bessel函数Kn(x),该函数等效于针对纯虚参判断的Bessel函数。 这些也称为双曲贝塞尔函数。 语法 BESSELK(X, N)争论 Argument描述Required/OptionalXThe value at which to evaluate the function.RequiredNThe order of the function. If n i…

深度学习-全连接神经网络-训练过程-欠拟合、过拟合和Dropout- [北邮鲁鹏]

目录标题 机器学习的根本问题过拟合overfitting泛化能力差。应对过拟合最优方案次优方案调节模型大小约束模型权重&#xff0c;即权重正则化(常用的有L1、L2正则化)L1 正则化L2 正则化对异常值的敏感性随机失活(Dropout)随机失活的问题 欠拟合 机器学习的根本问题 机器学习的根…

WebRTC 源码 编译 iOS端

1. 获取依赖工具 首先&#xff0c;确保你已经安装了以下工具&#xff1a; GitDepot ToolsXcode&#xff08;确保已安装命令行工具&#xff09; 2. 下载 depot_tools 使用 git 克隆 depot_tools 并将其添加到你的 PATH 中&#xff1a; /path/to/depot_tools 替换为自己的路径…

正规股票配资网站的三个明显特点分析

随着股票市场的快速发展&#xff0c;越来越多的投资者开始考虑使用股票配资来增加自己的资金流动性和收益率。然而&#xff0c;在选择股票配资网站时&#xff0c;投资者往往难以辨别哪些网站是正规的&#xff0c;哪些网站存在风险。因此&#xff0c;以下将分析正规股票配资网站…

如果你想了解远程工作,这篇文章不容错过

大家好&#xff0c;好久不见&#xff0c;我好久都没写原创文章了。 最近周边的越来越多朋友来找我了解远程工作相关的问题&#xff0c;正好这个月也是我远程工作一年半了&#xff0c;所以就写篇文章聊聊关于这块的话题吧。 语言问题 首先远程工作基本分两种团队&#xff0c;一种…

实用工具JRebel XRebel【2023】配置和使用的详解

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于JRebel & XRebel的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.JRebel 的简介 二.插件的…

学习javaEE初阶的第一堂课

学习金字塔 java发展简史 Java最初诞生的时候是用来写前端的!! 199x年 199x年,互联网还处在比较早期的阶段,当时主流的编程语言是 C/C, 有个大佬要搞个"智能面包机",觉得用C来做太难了 于是就基于C搞了个简单点的语言,Java 就诞生了~~ 遗憾的是项目流产了,没做成…

day6_C++

day6_C 模板 栈模板 队列思维导图 模板 栈 stack.h #ifndef STACK_H #define STACK_H#include <iostream> #include <cstring>using namespace std;#define MAX 5template<typename T> class Stack { public:/*构造函数*/Stack();/*拷贝构造函数*/Stack(co…

小谈设计模式(1)—总序

小谈设计模式&#xff08;1&#xff09;—总序 专栏地址开始操作设计模式总论设计模式是什么组成要素模式名称问题描述解决方案效果描述 设计模式有什么作用提供可重用的解决方案提高代码的可读性和可维护性促进代码的可扩展性提高代码的灵活性和可重用性促进团队合作和沟通作用…

【轻NAS】Windows搭建可道云私有云盘,并内网穿透公网访问

文章目录 1.前言2. Kodcloud网站搭建2.1. Kodcloud下载和安装2.2 Kodcloud网页测试 3. cpolar内网穿透的安装和注册4. 本地网页发布4.1 Cpolar云端设置4.2 Cpolar本地设置 5. 公网访问测试6.结语 1.前言 云存储作为近些年兴起的概念&#xff0c;成功吸引了各大互联网厂商下场&…

re学习(37)DASCTF 2023_7 controlflow

IDA载入一下 发现flag的长度为40&#xff0c;然后将input[i]的值赋值给str[i]&#xff0c;str[i]又执行一个异或操作&#xff0c;但是上面又有一些函数&#xff0c;导致这个程序的控制流有点奇怪..... 输入40只&#xff0c;检验是否是flag。 F5直接罢工了&#xff0c;暂时先忽…

【深度学习实战—6】:基于Pytorch的血细胞图像分类(通用型图像分类程序)

✨博客主页&#xff1a;米开朗琪罗~&#x1f388; ✨博主爱好&#xff1a;羽毛球&#x1f3f8; ✨年轻人要&#xff1a;Living for the moment&#xff08;活在当下&#xff09;&#xff01;&#x1f4aa; &#x1f3c6;推荐专栏&#xff1a;【图像处理】【千锤百炼Python】【深…

浏览器进程,性能指标,性能优化

目录 浏览器进程&#xff1a;多进程 主进程&#xff1a;显示、交互&#xff0c;增删进程 UI进程&#xff1a;控制地址栏、书签、前进后退 存储进程&#xff1a;cookie&#xff0c;webstorage&#xff0c;indexDB 渲染进程&#xff1a;每个标签页或窗口都有一个独立的渲染进…

Element UI 表单验证规则动态失效问题

Element 版本&#xff1a;v2.15.3 问题背景 如下代码所示&#xff1a;有一个上传文件的 input 组件&#xff0c;在更新的时候&#xff0c;如果不上传文件表示不更新&#xff0c;如果要更新则点击 「重新上传」按钮将上传组件显示出来 <el-form ref"form" :mode…

day42

#include <iostream>using namespace std; template <typename T> class stu { private:T num[20];T head;T low; public:stu(){}stu(T h,T l):head(h),low(l){cout<<"有参构造"<<endl;}~stu(){cout<<"析构函数"<<end…

基于深度学习网络的烟雾检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .........................................................................% 预处理训练数…

2023-9-14 最长上升子序列

题目链接&#xff1a;最长上升子序列 #include <iostream> #include <algorithm>using namespace std;const int N 1010;int n; int a[N]; int f[N];int main() {cin >> n;for(int i 1; i < n; i ) cin >> a[i];for(int i 1; i < n; i ){f[i]…

VS报错 The build tools for v141 (Platform Toolset = ‘v141‘) cannot be found.

在配置OpenGL 项目的时候遇到了平台不一致的问题 错误 1 error MSB8020: The build tools for v141 (Platform Toolset v141) cannot be found. To build using the v141 build tools, please install v141 build tools. Alternatively, you may upgrade to the current Vis…

汽车电子智能仓储系统的发展趋势与应用探索

现代汽车制造业中的仓储管理一直面临着多种挑战。仓库中物料的数量种类繁多&#xff0c;寻找物料耗时长、困难大。盘点过程耗费人力多、成本高、速度慢。管理无法达到先进先出的原则&#xff0c;也无法进行精准追溯。此外&#xff0c;多发、少发、错料等问题时有发生。仓库中的…

肖sir__mysql之单表__004

mysql之单表 一、建表语句 1、show databases 查看所有的数据库 2、create databaes 数据库名 创建数据库 3、use 数据库名 指定使用数据库 4、show tables &#xff1b; 5、创建表 格式&#xff1a;create table 表名 (字段名1 数据类型1(字符长度),字段名2 数据类型2(字…