create-react-app 打包去掉 map文件

前言:

在使用 create-react-app 创建的React应用中,默认情况下会生成带有.map文件的打包文件,这些.map文件包含了源代码和调试信息,用于开发和调试过程中进行错误跟踪。然而,在生产环境中,这些.map文件通常是不必要的,因为它们会增加打包文件的大小,而且不会被浏览器使用。

默认的打包文件目录截图:
map文件很大,部署到生产复制有些不合适,虽然,不影响加载速度,但是占磁盘空间。
打包截图

解决方案:

方法一:直接修改配置文件

在node_modules文件夹中找到react-scripts包路径/node_modules/react-scripts/config/webpack.config.prod.js
找到const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== ‘false’;将这一行代码注释
在下面添加一行 const shouldUseSourceMap = false;
重启终端,重新打包

如果 使用了 npm run eject则可以直接修改 config/webpack.config.js 里的内容 :
搜索 shouldUseSourceMap 找到 const 声明它的地方。然后直接 让其=false(或者复制一下=false也行)

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

改成:

//const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP= 'false';

config/webpack.config.js截图

方法二:修改 package.json里的 打包命令

yarn add cross-env

修改 package.json里的build 命令 :

 "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js",

方法三:添加.env文件修改变量(推荐)

在根目录下创建 .env文件,里面写入:

GENERATE_SOURCEMAP = false

方法四:没暴露 webpack配置

react-app-rewired 和 customize-cra-5 这个也可以重写自己的webpack配置。

module.exports = function override(config, env) {// 修改生成 source map 的配置config.devtool = 'source-map'; // 或者 'nosources-source-map'return config;
};

总结:

配置完后需要重新 npm run build! 总的来说 方法三最方便。
如果你 没暴露 wbpack配置,使用的是重写配置用方式四,倒也很轻松。

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

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

相关文章

SQL学习笔记+MySQL+SQLyog工具教程

文章目录 1、前言2、SQL基本语言及其操作2.1、CREATE TABLE – 创建表2.2、DROP TABLE – 删除表2.3、INSERT – 插入数据2.4、SELECT – 查询数据2.5、SELECTDISTINCT – 去除重复值后查询数据2.6、SELECTWHERE – 条件过滤2.7、AND & OR – 运算符2.8、ORDER BY – 排序2…

SAP 采购订单暂存 EKKO-MEMORY 做标识

ME21N创建采购订单的时候可以点击 暂存 按钮保存订单 ME22N进去修改的时候会提示这个订单是暂存的 在表EKKO里字段 MEMORY 打上了标识则标识这个是暂存的 MEMORYTYPE 字段则记录了暂存的状态

理解pom.xml中的parent标签

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: 循序渐进学SpringBoot ✨特色专栏&…

【TI毫米波雷达】上电时序、串口回环BUG及SOP模式不正常工作的解决方案(LP87524电源PMIC芯片的BUCK供电时序配置)

【TI毫米波雷达】雷达上电时序及SOP模式不正常工作的解决方案(LP87524电源PMIC芯片的BUCK供电时序配置) 文章目录 上电时序上电以后的雷达串口回环问题延迟上电时序LP87524电源PMIC芯片的BUCK供电时序LP87524电源PMIC芯片的BUCK默认供电输出附录&#x…

w3af安装(处理python2和3,pip2和3混乱的问题)

git clone --depth 1 https://github.com/andresriancho/w3af.git cd w3af ./w3af_gui报错 打开w3af_gui看一下 要求必须是python2 但我的/usr/bin/env中的python是python3 我们将/usr/bin/env中的python换成python2 which python2 #/usr/bin/python2rm /usr/bin/pythonsud…

探索数据宇宙之飞船 -- python进阶函数numpy

导读:NumPy以其强大的多维数组对象和广泛的数学函数库著称。这些特性使得NumPy成为不仅在学术研究,也在工业界广泛应用的工具。无论是机器学习算法的开发、数据分析、还是复杂的数学模型的构建,NumPy都扮演着举足轻重的角色。 目录 Numpy简…

node.js mongoose aggregate

目录 官方文档 简述 Aggregate的原型方法 aggregate进行操作 官方文档 Mongoose v8.0.3: Aggregate 简述 在 Mongoose 中,Aggregate 是用于执行 MongoDB 聚合操作的类。MongoDB 聚合操作是一种强大的数据处理工具,可以用于对集合中的文档进行变换和…

星融元中标华夏银行项目,助力金融数据中心可视网建设工作

近日,星融元成功入围华夏银行国产品牌网络流量汇聚分流器(TAP)设备供应商,在助力头部金融机构构建数据中心可视网络的建设工作中,星融元又一次获得全国性股份制银行客户的青睐。 华夏银行作为全国性股份制商业银行积极…

2-负载均衡、反向代理

负载均衡、反向代理 upstream server即上游服务器,指Nginx负载均衡到的处理业务的服务器,也可以称之为real server,即真实处理业务的服务器。 对于负载均衡我们要关心的几个方面如下: 上游服务器配置:使用upstream server配置上…

ansible的脚本------playbook剧本

playbook组成部分: 1.task 任务:包含要在目标主机上执行的操作,使用模块定义这些操作。每个都是一个模块的调用。2.variables 变量:存储和传递数据。变量可以自定义,可以在playbook当中定义为全局变量,也可…

Navicat16的下载与安装

Navicat16的下载与安装 1、官网下载地址:https://www.navicat.com.cn/download/navicat-premium 当然有的朋友在官网下载比较慢,我也为大家准备好了百度网盘链接 链接:https://pan.baidu.com/s/1dUcTSHr3761Oayh0-WfolA?pwdwfpl 提取码&am…

Nature Commun|ATAC-seq探究复发性小儿B系急性淋巴细胞白血病的染色质可及性图谱

表观基因组学分析是解释非编码基因组功能的重要方法之一。表观基因组学特征作为肿瘤细胞的基本特征,对发病机制、临床行为和治疗具有影响。在所有表观基因组标记中,组蛋白修饰和 DNA 甲基化已得到最广泛的研究,以深入了解表观基因组失调。 染…

车辆违规实线变道检测系统:融合Gold-YOLO改进YOLOv8

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义 随着城市化进程的加快和交通工具的普及,道路交通安全问题日益凸显。其中,车辆违规实线变道是导致交通事故的重要原因之一。在道路上&…

【办公软件】C# NPOI 操作Excel 案例

文章目录 1、加入NPOI 程序集,使用nuget添加程序集2、引用NPOI程序集3、设置表格样式4、excel加载图片5、导出excel 1、加入NPOI 程序集,使用nuget添加程序集 2、引用NPOI程序集 private IWorkbook ExportExcel(PrintQuotationOrderViewModel model){//…

虾皮电商 电商平台:东南亚最大的跨境电商平台

虾皮电商(Shopee)是新加坡的一家跨境电商平台,隶属于Sea Group公司。虾皮电商以其强大的社交功能和便捷的物流服务而闻名,为卖家和买家提供了出色的交易体验。本文将介绍虾皮电商的发展历程、优势以及为卖家提供的一站式解决方案。…

JVM征服面试篇-亿及流量系统设计(学习笔记)

一、如何拆解亿级流量系统-百万级结算系统如何设置JVM 1.先确认如下问题: 2.第一步:确定业务背景和核心流程 3.第二步:确认系统的压力在哪里 3.第三步:确定QPS 4.第四步:确定单笔订单耗时,寻找性能瓶颈 5.…

金蝶报表二开

本案例描述: 折旧明细报表中加入字段:存放地点、成本中心部门、使用人组织三个字段。 参考社区案例:报表二次开发添加自定义字段的指导方案 步骤: 1、加入报表插件 继承原报表的类。重写BuilderReportSqlAndTempTable、GetRe…

MyBatis 运行原理

MyBatis框架在操作数据库时,大体经过了8个步骤: 1.读取 MyBatis 配置文件:mybatis-config.xml 为 MyBatis 的全局配置文件,配置了 MyBatis 的运行环境等信息,例如数据库连接信息。 2.加载映射文件:映射文…

JDBC编程(主要针对其流程)

JDBC编程 注:在本篇博客中,使用的数据库是mysql!!! 一、JDBC编程六步 1、注册驱动 这步就是在告诉Java程序,即将要连接的为哪个品牌的数据库, 这里有两种方法 ① //就是使用一个了多态&am…

Dokit 开源库:简化 Android 应用开发的利器

Dokit 开源库:简化 Android 应用开发的利器 一、Dokit 简介二、Dokit 功能三、Dokit 使用3.1 DoKit Android 最新版本3.2 DoKit Android 接入步骤 四、总结 在 Android 应用开发过程中,我们经常需要处理调试、性能优化和用户体验等方面的问题。然而&…