React项目打包流程

一、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>

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

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

相关文章

RIS 系列 See-Through-Text Grouping for Referring Image Segmentation 论文阅读笔记

RIS 系列 See-Through-Text Grouping for Referring Image Segmentation 论文阅读笔记 一、Abstract二、引言三、相关工作3.1 Semantic Segmentation and Embeddings3.2 Referring Expression Comprehension3.3 Referring Image Segmentation 四、方法4.1 视觉表示4.2 文本表示…

【yolofastest上手】

一、前言 yolofastest网上资料比较少&#xff0c;也没有视频教学&#xff0c;所以想要使用参考了很多资料&#xff0c;只能说各资料都不尽全&#xff0c;让刚接触的小白无从下手。 参考资料: github地址 yolo-fastest 快速上手 修改参数遇到的问题 能在ARM-CPU上实时识别图像的…

销售转行上位机编程:我的学习与职业经历分享

同学们好&#xff0c;我是杨工&#xff0c;原先是一名销售。 通过在华山编程培训中心学习&#xff0c;成功转行上位机编程&#xff0c;对此我想分享学习和职业经历。 在职业生涯的早期&#xff0c;我并没有考虑将技术融入到我的工作中。然而&#xff0c;在几次创业的失败后&a…

{MySQL}索引事务和JDBC

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、索引1.1索引是什么1.2作用1.3代码 二、事务2.1什么是事务2.2使用 三.JDBC总结 前言 接着上次&#xff0c;继续讲下MySQL 提示&#xff1a;以下是本篇文章正…

Jmeter吞吐量控制器总结

吞吐量控制器(Throughput Controller) 场景&#xff1a; 在同一个线程组里, 有10个并发, 7个做A业务, 3个做B业务,要模拟这种场景,可以通过吞吐量模拟器来实现。 添加吞吐量控制器 用法1: Percent Executions 在一个线程组内分别建立两个吞吐量控制器, 分别放业务A和业务B …

多浏览器密码修改,账户Token全部失效解决方案

问题场景&#xff1a; 用户在多个浏览器登录同一个账户时&#xff0c;正常情况下每个浏览器获得token应该是不同的。但若是其中一个浏览器进行了修改密码的操作&#xff0c;就应该删除该账户关联的所有token。该功能如何实现呢&#xff1f; 在这里提供一个解决方案&#xff0c;…

如何基于PyTorch框架自定义数据集类获取数据

在PyTorch框架中&#xff0c;可以通过自定义数据集类来加载和处理数据 要自定义数据集类&#xff0c;需要继承 PyTorch提供的 torch.utils.data.Dataset类&#xff0c;并实现两个主要方法&#xff1a;__len__ 和 __getitem__ 下面是一个示例&#xff0c;展示如何基于PyTorch框…

R503S指纹识别模块的通信协议

1 物理层 物理层采用串口通讯&#xff0c;波特率 57600&#xff0c;8 位数据位&#xff0c;1 位停止位&#xff0c;无奇偶校验位。 2 数据包格式 模块采用 UART 与上位机通讯&#xff0c;对命令、数据、结果的接收和发送&#xff0c;都采用数据包的形式。对于多字节的&#x…

用CSS中的动画效果做一个转动的表

<!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title></title><style>*{margin:0;padding:0;} /*制作表的样式*/.clock{width: 500px;height: 500px;margin:0 auto;margin-top:100px;border-rad…

JavaScript(注释,数据类型,运算符,条件语句)

一 注释 1.1 单行注释 //这是单行注释 1.2 多行注释 /*这是多行注释*/ 1.3 嵌套在HTML文件中注释 <!--注释--> 1.4 注释的快捷键 ctrl/ 二 JavaScript输出方式 2.1 在浏览器中展示对话框&#xff0c;弹出要展…

强化学习计划

文章目录 强化学习强化学习解决的是什么样的问题&#xff1f;举出强化学习与有监督学习的异同点。有监督学习靠样本标签训练模型&#xff0c;强化学习靠的是什么&#xff1f;强化学习的损失函数&#xff08;loss function&#xff09;是什么&#xff1f;写贝尔曼方程&#xff0…

【Linux Shell学习笔记】Linux Shell的流控制

1、 if条件判断 1.1 格式 1.1.1 单分支 if [ 判断表达式 ];then 代码块 fi 1.1.2 双分支 if [ 判断表达式 ];then 代码1 else 代码2 fi 1.1.3 多分支 if [ 判断表达式1 ];then 代码1 elif [ 判断表达式2 ];then 代码2 elif [ 判断表达式3 ];then 代…

【数据结构】双向带头循环链表的实现

前言&#xff1a;在前面我们学习了顺序表、单向链表&#xff0c;今天我们在单链表的基础上进一步来模拟实现一个带头双向链表。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f448; &#x1f4af;代码仓库:卫卫周大胖的…

USB -- STM32F103复合设备(HID+MassStorage)传输讲解(十)

目录 链接快速定位 前沿 1 描述符讲解 1.1 设备描述符 1.2 配置描述符 1.3 接口描述符 1.4 功能描述符 1.5 端点描述符 1.6 字符串描述符 1.7 报告描述符 2 运行演示 链接快速定位 USB -- 初识USB协议&#xff08;一&#xff09; 源码下载请参考链接&#xff1a;…

修改字符串(c++题解)

题目描述 给你一个长度为 的字符串 &#xff0c;由大写和小写英文字母组成。 对字符串 进行 次修改。由两个整数和一个字符组成的元组 表示 -th 修改 &#xff0c;如下所示。 如果是&#xff0c;则将的个字符改为。如果是 &#xff0c;将 中的所有大写字母转换为小写字…

java中PhantomReference WeakReference SoftReference垃圾回收触发时机以及使用场景

java 中对象引用一般引用分为四种情况 强引用 即我们平常创建的对象 Object obj new Object() 垃圾回收触发时机 在没设置 jvm 参数 -XX:PretenureSizeThreshold 和 -XX:MaxTenuringThreshold 的情况下 -XX:PretenureSizeThreshold 的值为 0&#xff0c;即未设置大对象直接…

三巨头对决:深入了解pnpm、yarn与npm

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 三巨头对决&#xff1a;深入了解pnpm、yarn与npm 前言包管理器简介npm&#xff08;Node Package Manager&#xff09;&#xff1a;Yarn&#xff1a;pnpm&#xff08;Performant Npm&#xff09;&#…

Linux 服务器安全策略技巧:使用数字证书进行认证

什么是数字证书? 数字证书是一种用于验证和加密网络通信的安全工具。它是由认证机构(CA)颁发的一种电子文件,用于证明某个实体的身份。数字证书包含了实体的公钥和其他相关信息,可以用于验证实体的身份和确保通信的机密性。 为什么使用数字证书进行认证? 在Linux服务器…

基于Mapify的在线艺术地图设计

地图是传递空间信息的有效载体&#xff0c;更加美观、生动的地图产品也是我们追求目标。 那么&#xff0c;我们如何才能制出如下图所示这样一幅艺术性较高的地图呢&#xff1f;今天我们来一探究竟吧&#xff01; 按照惯例&#xff0c;现将网址给出&#xff1a; https://www.m…

微信小程序实现一个天气预报应用程序

微信小程序实现一个天气预报应用程序 第一步创建一个项目第二步项目目录下找到 pages/index/index.wxml 文件第三步在 pages/index/index.wxss 文件中写入样式第四步在 pages/index/index.js 文件中添加以下代码项目简介 第一步创建一个项目 第二步项目目录下找到 pages/index…