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.mfbz.cn/a/262747.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ISA95 及工业互联网平台

ISA95简称S95,是美国仪表、系统和自动化协会(ISA)在95年提出来的,也是这个协会启动编制的第95个标准项目。它定义了企业商业和控制系统之间的集成,主要可以分成三个层次: 第0,1,2层…

Ubuntu20.04 及深度学习环境anaconda、cuda、cudnn、pytorch、paddle2.3安装记录

学习目标: Ubuntu20.04下装好torch、paddle深度学习环境。 选择的版本环境是 :最新的nvidia驱动、cuda 11.1 、cudnn v8.1.1,下面会说为啥这么选。 学习内容: 1. Ubuntu20.04仓库换源 本节参考Ubuntu 20.04 Linux更换源教程 2…

构建搜索引擎,而非向量数据库(Vector DB) [译]

原文:Build a search engine, not a vector DB 作者: Panda Smith 在过去 12 个月中,我们见证了向量数据库(Vector DB)创业公司的迅猛增长。我此刻并不打算深入探讨它们各自的设计取舍。相反,我更想探讨和…

2018年第七届数学建模国际赛小美赛C题共享单车对城市交通的影响解题全过程文档及程序

2018年第七届数学建模国际赛小美赛 C题 共享单车对城市交通的影响 原题再现: 共享自行车改变了许多城市的交通状况,许多大城市引入共享自行车来解决交通问题。我们需要定量评估共享自行车对城市交通的影响,以及相关的经济、社会和环境影响。…

苹果如何从iCloud恢复备份?正确方法看这里!

iCloud为所有苹果用户免费提供5G内存空间,用户可以将照片、短信、联系人、备忘录等重要信息备份到iCloud云端,这样可以方便在不同设备之间同步和共享。 同时,iCloud保证这些数据在所有苹果设备上及时自动更新。当遇到手机数据丢失时&#xf…

光纤的连接来了

光纤在工程布线中,难免会遇到线不够长或者磨损折断的情况,要怎么处理呢? 首先看看光纤的结构: 纤芯:中心部分,光波在纤芯中传输。 包层:环绕纤芯,折射率低于纤芯,作用是…

工业自动化的通信核心—钡铼技术R10A工业级路由器介绍

随着工业自动化的快速发展,工业通信技术也日新月异。在这个信息时代,工业通信设备的稳定性、可靠性和高效性变得尤为重要。作为工业自动化的核心部件之一,钡铼技术R10A工业级路由器以其出色的性能和卓越的功能在行业内赢得了广泛的赞誉。本文…

关于外贸包裹的那些事

大早晨收到一个客户留言,询问能不能看一下他的货物包裹被送到了哪里,然后客户可以安排他的代理人联系去取包裹,我心里的第一感觉是难道包裹丢失了? 于是赶紧起来查看物流单号,单号显示早在半个多月前已经被他的国内代…

C/C++ 块作用域的静态变量static的应用

块作用域的静态变量 静态变量(static variable)听起来自相矛盾,像是一个不可变的变量。实际上,静态的意思是该变量在内存中原地不动,并不是说它的值不变。具有文件作用域的变量自动具有(也必须是)静态存储器。创建的具…

Python实现接口测试总结--PyMySql库+封装

import pymysql # 封装数据库工具类 class DBUtil ( object ): # 添加类属性 conn None classmethod def __get_conn ( cls ): # 判断 conn 是否为空,如果是,创建 if cls . conn is None : cls . conn pymysql . connect ( host…

前端微信小程序AES加密解密踩坑

项目场景: 今天蛮沮丧的,在和别人对接的时候aes加解密的时候踩了坑。今天有个同事请假了,所以本来他和别人对接的活,老大给了我,然后我就正式踏上了战战兢兢的对接之路。 1.一开始的时候对面先是问用的啥加密方法。这…

Go后端开发 -- Golang的语言特性

Go后端开发 – Golang的语言特性 文章目录 Go后端开发 -- Golang的语言特性一、Golang的优势1.部署极其简单:2.静态语言3.语言层面的并发4.强大的标准库5.简单易学6.运行效率对比 二、Golang的适用领域1.应用领域2.明星产品 三、Golang的不足 一、Golang的优势 1.部…

华清远见作业第十四天

思维导图 1、顺序表按元素删除 代码: int delete_num_delete(sqlist *list,datatype key) {int indexseek_num(list,key);//元素查找函数if(index-1){return -1;}delete_index(list,index);return 0; } 2、顺序表按照元素修改 代码: //顺序表按照元…

搭载紫光展锐芯的移远通信RedCap模组顺利通过中国联通OPENLAB实验室认证

近日,移远通信联合紫光展锐在中国联通5G物联网OPENLAB开放实验室,完成了RedCap模组RG207U-CN端到端测试验收,并获颁认证证书。移远通信RG207U-CN成为业内率先通过联通OPENLAB认证的紫光展锐RedCap芯片平台的模组。 本次测试基于联通OPENLAB实…

【Java代码审计】RCE篇

【Java代码审计】RCE篇 1.Java中的RCE2.ProcessBuilder命令执行漏洞3.Runtime exec命令执行漏洞4.脚本引擎代码注入5.RCE的防御 1.Java中的RCE 在PHP开发语言中有system()、exec()、shell_exec()、eval()、passthru()等函数可以执行系统命令。在Java开发语言中可以执行系统命令…

7-1 建立二叉搜索树并查找父结点(PTA - 数据结构)

按输入顺序建立二叉搜索树,并搜索某一结点,输出其父结点。 输入格式: 输入有三行: 第一行是n值,表示有n个结点; 第二行有n个整数,分别代表n个结点的数据值; 第三行是x,表示要搜索值…

利用ffmpeg cv2取h265码流视频(转换图片灰屏问题解决)

利用海康威视相机拍出来的视频是H265格式的,相比于常规的H264编码,压缩率更高,但因此如果直接用正常取流方法读取,会出现无法读取的情况 1. 如图h265码流取出图片为灰屏 2 、解决灰屏问题 import subprocess import cv2# 将h265流…

【MyBatis Plus】Service Mapper内置接口讲解

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《MyBatis-Plus》。🎯🎯 &am…

IXXAT NT系列高稳定性网关网桥解决方案

CAN网关网桥功能特点 在之前的文章中我们介绍了CAN中继器在实际场景中的使用,它通常用在CAN的信号远距离传输和降低干扰方面。 我们知道CAN中继器本身并不发出CAN数据帧,而是对CAN数据进行过滤。而CAN网桥则是将上一个网段中的CAN数据帧收取后&a…

自定义Taro上传图片hooks(useUploadImg)

有两个方法需要提前引入 FileUtil(上传文件的方法)、to(对请求接口返回做了二次处理,数据和错误提示等) //FileUtil export namespace FileUtil {const env {timeout: 10000,uploadImageUrl: "阿里云的地址",};const genPolicy …
最新文章