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

React项目打包流程

news 2026/3/31 19:12:02

一、React项目打包流程

一、React项目打包流程1. 项目打包打包命令：npm run build2. 预览接着命令行会提示执行：
先：npm install -g serve  
然后执行此命令：serve -s build

二、打包优化 - 配置路由懒加载

二、打包优化 - 配置路由懒加载
路由懒加载是指路由的JS资源只有在被访问时才会动态获取，目的是为了优化项目首次打开的时间1. 把路由修改为由React提供的lazy函数进行动态导入
2. 使用React内置的Suspense组件包裹路由中element选项对应的组件代码如下所示：
// 路由配置
import { Suspense, lazy } from 'react';
import { AuthRoute } from '@/components/AuthRoute';
import { createBrowserRouter } from 'react-router-dom';// 一级路由
import Layout from '@/pages/Layout';
import Login from "@/pages/Login";// 1. lazy函数对二级路由组件进行导入
const Home = lazy(() => import('@/pages/Home'))
const Article = lazy(() => import('@/pages/Article'))
const Publish = lazy(() => import('@/pages/Publish'))// 二级路由
// import Home from '@/pages/Home';
// import Article from '@/pages/Article';
// import Publish from '@/pages/Publish';// 配置路由实例
const router = createBrowserRouter([{path: '/',// 根据权限的有无控制路由跳转element: <AuthRoute><Layout /></AuthRoute>,children: [{path: 'home',element: <Suspense fallback="加载中"><Home /></Suspense>},{path: 'article',element: <Suspense fallback="加载中"><Article /></Suspense>},{path: 'publish',element: <Suspense fallback="加载中"><Publish /></Suspense>}]},{path: '/login',element: <Login />}
])export default router;

三、打包优化 - 包体积分析

三、打包优化 - 包体积分析通过可视化的方式，直观的体现项目中各种包打包之后的体积大小，方便做优化1. 安装包 --> source-map-explorernpm i source-map-explorer2. 配置命令指定要分析的js文件在package.json内scripts添加如下代码："analyze": "source-map-explorer 'build/static/js/*.js'""scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "craco eject","analyze": "source-map-explorer 'build/static/js/*.js'"
}

四、打包优化 - CDN优化

四、打包优化 - CDN优化1. 什么是CDN？ 
CDN是一种内容分发网络服务，当用户请求网站内容时，由离用户最近的服务器将缓存的资源内容传递给用户2. 哪些资源可以放到CDN服务器
体积较大的非业务JS文件，比如react、react-dom
⑴. 体积较大，需要利用CDN文件在浏览器的缓存特性，加快加载时间
⑵. 非业务JS文件，不需要经常做变动，CDN不用频繁更新缓存3. 项目中怎么做？
⑴. 把需要做CDN缓存的文件排除在打包之外（react，react-dom）
⑵. 以CDN的方式重新引入资源（react、react-dom）1. 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')},// 配置CDNconfigure: webpackConfig => {let cdn;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.cdn = cdn;}return webpackConfig;}}
}2. public文件夹下index.html代码如下：<body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><!-- 动态插入cdn资源url， 加载第三发包的 CDN 链接 --><% htmlWebpackPlugin.userOptions.cdn.js.forEach(cdnURL => { %><script src="<%= cdnURL %>"></script><% }) %>
</body>

相关文章：

React项目打包流程

一、React项目打包流程 一、React项目打包流程1. 项目打包打包命令&#xff1a;npm run build2. 预览接着命令行会提示执行&#xff1a; 先&#xff1a;npm install -g serve 然后执行此命令&#xff1a;serve -s build二、打包优化 - 配置路由懒加载 二、打包优化 - 配置路…...

编程日记 2024/1/1 1:42:13

04-获取认证的用户身份信息

存储用户信息的方式 获取用户信息的流程 用户提交账号和密码后,DaoAuthenticationProvider调用UserDetailsService接口实现类的loadUserByUsername()方法,该方法可以接收请求参数username的值,然后根据该值查询用户信息,最后将账号,密码,权限封装到UserDetails对象中并返回给…...

编程日记 2024/1/1 1:41:12

二叉树的中序遍历，力扣

目录 题目地址&#xff1a; 题目&#xff1a; 解题方法&#xff1a; 解题分析&#xff1a; 解题思路&#xff1a; 代码实现&#xff1a; 注&#xff1a; 代码实现&#xff08;递归&#xff09;&#xff1a; 代码实现&#xff08;迭代&#xff09;&#xff1a; 题目地址&#xf…...

编程日记 2024/1/1 1:40:11

shiro1.10版本后-IniSecurityManagerFactory过期失效

1、问题概述&#xff1f; 今天在研究了shiro的新版本shiro1.13.0版本&#xff0c;发现用了很长时间的IniSecurityManagerFactory工厂失效了。 从下图中可以看出&#xff0c;在新版本中IniSecurityManagerFactory被打上了过期线了。 那么问题来了&#xff0c;新版本如何使用呢…...

编程日记 2024/1/1 1:38:08

阿里后端实习二面

阿里后端实习二面 记录面试题目&#xff0c;希望可以帮助到大家 类加载的流程&#xff1f; 类加载分为三个部分&#xff1a;加载、连接、初始化 加载 类的加载主要的职责为将.class文件的二进制字节流读入内存(JDK1.7及之前为JVM内存&#xff0c;JDK1.8及之后为本地内存)&…...

编程日记 2024/1/1 1:37:07

「Kafka」生产者篇

「Kafka」生产者篇 生产者发送消息流程 在消息发送的过程中&#xff0c;涉及到了 两个线程 ——main 线程和Sender 线程。 在 main 线程中创建了 一个 双端队列 RecordAccumulator。 main线程将消息发送给RecordAccumulator&#xff0c;Sender线程不断从 RecordAccumulator…...

编程日记 2024/1/1 1:35:06

C语言实现RSA算法加解密

使用c语言实现了RSA加解密算法&#xff0c;可以加解密文件和字符串。 rsa算法原理 选择两个大素数p和q&#xff1b;计算n p * q;计算φ(n)(p-1)(q-1)&#xff1b;选择与φ(n)互素的整数d&#xff1b;由de1 mod φ(n)计算得到e&#xff1b;公钥是(e, n), 私钥是(d, n);假设明…...

编程日记 2024/1/1 1:31:03

如何设计前后端分离的系统架构？

如何将前端页面和后端Java代码进行集成&#xff1f; 将前端页面和后端Java代码进行集成通常需要使用一些特定的工具和技术。以下是一些常见的方法&#xff1a; 使用RESTful API&#xff1a;REST&#xff08;Representational State Transfer&#xff09;是一种基于HTTP协议构…...

编程日记 2024/1/1 1:27:59

【强化学习】SARAS代码实现

前言 SARAS&#xff0c;假设环境状态和动作状态都是离散的。利用动作价值矩阵来进行行为的预测。其主要就是利用时序差分的思想&#xff0c;对动作价值矩阵进行更新。 代码实现 import gymnasium as gym import numpy as npclass sarsa():def __init__(self, states_n, acti…...

编程日记 2024/1/1 1:25:58

P1019 [NOIP2000 提高组] 单词接龙 刷题笔记

P1019 [NOIP2000 提高组] 单词接龙 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路来自 大佬 Chardo 的个人中心 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 匹配 &#xff1a; 将 第一个字符串末尾 和第二个字符串第一个开始匹配 如果 j<i这段走完了 flag还没…...

编程日记 2024/1/1 1:23:56

如何实现WinApp的UI自动化测试？

WinApp&#xff08;WindowsAPP&#xff09;是运行在Windows操作系统上的应用程序&#xff0c;通常会提供一个可视的界面&#xff0c;用于和用户交互。例如运行在Windows系统上的Microsoft Office、PyCharm、Visual Studio Code、Chrome&#xff0c;都属于WinApp。常见的WinApp&…...

编程日记 2024/1/1 1:20:54

chrome扩展程序开发之在目标页面运行自己的JS

原文地址&#xff1a;https://qdgithub.com/home/index/article/aid/247.html chrome 插件开发的入门介绍&#xff0c;实现利用 chrome 扩展实现在目标网页运行我们的 js 的功能。关于 chrome 扩展的详细内容&#xff0c;可以通过官网了解。 开发工具很简单&#xff0c;记事本…...

编程日记 2024/1/1 1:19:53

NLP项目之语种识别

目录 1. 代码及解读2. 知识点n-grams仅保留最常见的1000个n-grams。意思是n1000 ? 1. 代码及解读 in_f open(data.csv) lines in_f.readlines() in_f.close() dataset [(line.strip()[:-3], line.strip()[-2:]) for line in lines] print(dataset[:5])[(1 december wereld…...

编程日记 2024/1/1 1:18:52

Linux lpr命令教程：如何使用lpr命令打印文件（附案例详解和注意事项）

Linux lpr命令介绍 lpr命令在Unix-like操作系统中用于提交打印任务。如果在命令行中指定了文件名&#xff0c;那么这些文件将被发送到指定的打印机&#xff08;如果没有指定目的地&#xff0c;则发送到默认目的地&#xff09;。如果命令行中没有列出文件&#xff0c;lpr将从标…...

编程日记 2024/1/1 1:17:51

浅谈C语言inline关键字

对于C开发者来说&#xff0c;inline是个再熟悉不过的关键字&#xff0c;因为默认的成员函数都是inline&#xff0c;也是常规高校教材中宣扬C的“优势”之一。 但是C语言其实也是支持inline关键字的&#xff0c;而且是很早期的gcc就支持了该关键字。在Linux0.12版本内核代码中也…...

编程日记 2024/1/1 1:15:49

Flink1.17实战教程（第六篇：容错机制）

系列文章目录 Flink1.17实战教程&#xff08;第一篇&#xff1a;概念、部署、架构&#xff09; Flink1.17实战教程&#xff08;第二篇&#xff1a;DataStream API&#xff09; Flink1.17实战教程&#xff08;第三篇&#xff1a;时间和窗口&#xff09; Flink1.17实战教程&…...

编程日记 2024/1/1 1:14:49

OpenCV实战 -- 维生素药片的检测记数

文章目录 检测记数原图经过操作开始进行消除粘连性--形态学变换总结实现方法1. 读取图片&#xff1a;2. 形态学处理&#xff1a;3. 二值化&#xff1a;4. 提取轮廓&#xff1a;5. 轮廓筛选和计数&#xff1a; 分水岭算法&#xff1a;逐行解释在基于距离变换的分水岭算法中&…...

编程日记 2024/1/1 1:12:47

【AI】注意力机制与深度学习模型

目录 一、注意力机制 二、了解发展历程 2.1 早期萌芽&#xff1a; 2.2 真正意义的注意力机制&#xff1a; 2.3 2015 年及以后&#xff1a; 2.4 自注意力与 Transformer&#xff1a; 2.5 BERT 与预训练模型&#xff1a; 三、基本框架 1. 打分函数&#xff08;Score Fun…...

编程日记 2024/1/1 1:11:46

HTML5和JS实现新年礼花效果

HTML5和JS实现新年礼花效果 2023兔年再见&#xff0c;2024龙年来临了&#xff01; 祝愿读者朋友们在2024年里&#xff0c;身体健康&#xff0c;心灵愉悦&#xff0c;梦想成真。 下面是用HTML5和JS实现新年礼花效果&#xff1a; 源码如下&#xff1a; <!DOCTYPE html>…...

编程日记 2024/1/1 1:06:42

【owt-server】一些构建项目梳理

【owt-server】清理日志&#xff1a;owt、srs、ffmpeg 【owt】p2p client mfc 工程梳理【m98】webrtc vs2017构建带符号的debug库【OWT】梳理构建的webrtc和owt mfc工程 m79的mfc客户端及owt-client...

编程日记 2024/1/1 1:04:40

别再只用#if DEBUG了！C#预处理器指令的5个实战妙用（含#warning、#pragma避坑）

别再只用#if DEBUG了&#xff01;C#预处理器指令的5个实战妙用&#xff08;含#warning、#pragma避坑&#xff09; 在C#开发中&#xff0c;预处理器指令往往被简化为#if DEBUG的单一用途&#xff0c;这就像只把瑞士军刀当作开瓶器使用。实际上&#xff0c;这套工具能在代码质量管…...

编程新知 2026/3/31 19:08:32

不止于超市：用QGIS缓冲区+叠置分析，为你的奶茶店、自习室找个好位置

从奶茶店到自习室&#xff1a;QGIS空间分析赋能小微商业选址决策 走在街头&#xff0c;你是否好奇为什么某些奶茶店总是门庭若市&#xff0c;而几步之隔的同类店铺却冷冷清清&#xff1f;商业选址从来不是简单的"地段好"三个字能概括的。对于资金有限的小微创业者来说…...

编程新知 2026/3/31 15:47:30

Power BI 网页数据抓取实战：以新浪外汇为例，教你5分钟搞定动态表格导入与清洗

Power BI 网页数据抓取实战&#xff1a;新浪外汇动态表格导入与清洗全流程解析 外汇市场瞬息万变&#xff0c;作为业务分析师&#xff0c;每天手动记录汇率数据既耗时又容易出错。今天我们就以新浪财经外汇数据为例&#xff0c;手把手教你用Power BI实现5分钟自动化抓取清洗的完…...

编程新知 2026/3/31 15:20:40

用Asian Beauty Z-Image Turbo做古风头像：简单三步生成独一无二的东方美学作品

用Asian Beauty Z-Image Turbo做古风头像&#xff1a;简单三步生成独一无二的东方美学作品 想象一下&#xff0c;你的社交媒体头像不再是一张普通的自拍或卡通形象&#xff0c;而是一幅充满东方韵味的古风艺术作品——可能是唐代仕女的温婉&#xff0c;宋代文人的儒雅&#xf…...

编程新知 2026/3/31 14:54:15

2026年实测10款降AI工具：毕业论文降AIGC哪款最靠谱？

2026年毕业季临近&#xff0c;降低论文AI生成痕迹、通过学校AIGC检测已经成为所有毕业生的必过关卡。但当前降AI工具市场鱼龙混杂&#xff1a;不少用户花了高价处理&#xff0c;AI率却纹丝不动&#xff1b;还有的工具改完的论文语句生硬、逻辑混乱&#xff0c;反而过不了答辩。…...

编程新知 2026/3/31 13:43:06

Python MCP服务端框架源码剖析（2024最新LTS版内核解密）

第一章&#xff1a;Python MCP服务端框架源码剖析&#xff08;2024最新LTS版内核解密&#xff09;Python MCP&#xff08;Modular Control Protocol&#xff09;服务端框架2024 LTS版标志着其架构从单体调度向轻量级异步模块总线的重大演进。该版本基于 Python 3.11 构建&#…...

编程新知 2026/3/31 12:39:58

保姆级教程：用华为eNSP复现一个能跑通的企业网毕业设计（含VRRP、OSPF、防火墙策略）

华为eNSP企业网实战&#xff1a;从零构建高可用网络架构 刚接触网络工程的学生或初级工程师&#xff0c;面对企业级网络设计时常常陷入配置迷雾——为什么这里要用VRRP&#xff1f;OSPF区域划分的依据是什么&#xff1f;防火墙策略如何与NAT协同工作&#xff1f;本文将以华为eN…...

编程新知 2026/3/31 12:29:47

郭老师-我们为什么要爱国？

我们为什么要爱国&#xff1f; ——因为家在&#xff0c;根在&#xff0c;魂在“你可以不爱你的管家&#xff0c; 但必须爱你家的房子。”&#x1f33f; 国家如屋&#xff0c;人民为主&#xff0c; 执政者不过管家—— 而这屋&#xff0c;是我们的命脉所系。&#x1f3e0; 一、…...

编程新知 2026/3/31 11:29:14

Qwen3-TTS作品分享：听AI朗读你的日记、诗歌和故事

Qwen3-TTS作品分享&#xff1a;听AI朗读你的日记、诗歌和故事 1. 为什么你需要一个会"读心"的语音合成工具 想象一下这样的场景&#xff1a;深夜写完日记&#xff0c;点击播放键&#xff0c;听到一个温暖的声音将你的文字娓娓道来&#xff1b;创作完一首诗&#xf…...

编程新知 2026/3/31 10:57:05

comsol的单相变压器绕组及铁芯振动形变仿真模型 1、单相变压器组振动形变模型:绕组在漏磁场...

comsol的单相变压器绕组及铁芯振动形变仿真模型 1、单相变压器组振动形变模型:绕组在漏磁场的洛伦兹力作用下振动&#xff0c;在长期作用下发生位移形变 2、单相变压器铁芯振动形变模型:铁芯在磁致伸缩作用下发生振动形变 注:时域仿真可以设置观察点&#xff0c;导出随时间变化…...

编程新知 2026/3/31 10:04:22