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.hqwc.cn/news/291887.html

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

相关文章

4.6 继承

4.6 继承 C中的继承是一种面向对象编程的重要特性,允许一个类(派生类/子类)使用另一个类(基类/父类)的成员和行为。继承提供了代码重用、层次结构和多态性的机制。 继承的语法,简单的描述如下 class A :…

Debug

0、Debug的步骤 Debug(调试)程序步骤如下: 1、添加断点 2、启动调试 3、单步执行 4、观察变量和执行流程,找到并解决问题 1、添加断点 在源代码文件中,在想要设置断点的代码行的前面的标记行处,单击鼠标左键就可以设置断点&…

【Date对象】js中的日期类型Date对象的使用详情

😁 作者简介:一名大四的学生,致力学习前端开发技术 ⭐️个人主页:夜宵饽饽的主页 ❔ 系列专栏:JavaScript小贴士 👐学习格言:成功不是终点,失败也并非末日,最重要的是继续…

【Spring Security】打造安全无忧的Web应用--进阶篇

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于Spring Security的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.导入相关配置 1.pom 2.ym…

Python: 函数参数是值传递还是引用传递

是引用传递。 Python的设计哲学是一切皆对象,不仅体现在内置数据类型、数据结构是对象,还包括Python编译运行需要的一些设施,比如stackframe、traceback等等。所以,为了更方便的传递数据,cpython内部全部采用指针传递…

Hadoop 集群环境搭建

目录 第一部分:系统安装... 3 1:图形化安装... 3 2:选择中文... 3 3:安装选项... 3 4:软件选项... 4 5:安装位置... 4 6:网络配置... 6 7:开始安装... 7 8:创建用户... 7…

【动态规划】09路径问题_最小路径和_C++(medium)

题目链接:leetcode最小路径和 目录 题目解析: 算法原理 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 编写代码 题目解析: 题目让我们求从左上角到右下角的路径,使得路径上的数字总和为最小 由题可得&#x…

CUMT--Java复习--泛型与集合

目录 一、泛型 1、概述 2、通配符 3、有界类型 二、集合 1、概述 2、迭代器接口 三、集合类 1、Collection接口 2、List接口 3、Set接口 4、Queue接口 5、Map接口 四、集合转换 五、集合工具类 一、泛型 1、概述 从JDK5.0开始,Java引入泛型类型&…

【51单片机系列】C51中的中断系统扩展实验

本文是关于51单片机中断系统的扩展实验。 文章目录 一、 扩展实验一:使用外部中断0控制蜂鸣器,外部中断1控制直流电机二、扩展实验二:修改定时器初值,设定3秒钟的定时时间让LED模块闪烁三、扩展实验三:使用定时器1和数…

在RT-Thread中使用SystemView进行调试分析

一、SystemView SystemView is a toolkit for visual analysis of any embedded system. SystemView gives complete insight into an application, to gain a deep understanding of the runtime behavior, going far beyond what a debugger is offering. This is particula…

redis基本用法学习(C#调用NRedisStack操作redis)

redis官网文档中推荐C#中使用NRedisStack包连接并操作redis,本文学习C#调用NRedisStack操作redis的基本方式。   新建Winform项目,在Nuget包管理器中搜索并安装NRedisStack包,如下图所示: 主要调用StackExchange.Redis命名空间下…

STM32微控制器在热电偶传感器应用中的性能评估

热电偶传感器是一种常用的温度测量技术,广泛应用于工业和自动化领域。在本文中,我们将探讨STM32微控制器在热电偶传感器应用中的性能评估。我们将涵盖STM32的特性、热电偶传感器的原理、硬件连接、软件编程以及性能评估的方法和指标。 STM32微控制器的特…