react项目发布后,浏览器源码泄露的解决方案

在使用create-react-app时,打包生产环境npm run build,浏览器打开后仍然是可以看到源码的。源码都没上传,为啥线上能看到源码 。

例:线上与服务器

线上与源码

react-scripts build和npm run build 有什么不同

react-scripts buildnpm run build在React项目中都是用来构建生产环境的静态文件,但它们之间存在一些差异。具体如下:

  • react-scripts build:这是create-react-app脚手架提供的一个命令,用于简化构建过程。react-scriptscreate-react-app生成的项目中的一个依赖项,它封装了Webpack配置和一系列构建脚本,使得开发者无需关心底层的构建细节。这个命令会启动一个生产模式的构建过程,包括代码压缩、文件合并、样式预处理等,最终生成优化后的静态文件。
  • npm run build:这是一个通用的npm命令,它会执行package.json文件中scripts字段下定义的build脚本。在create-react-app创建的项目中,package.json中的build脚本通常会指向react-scripts build命令。这意味着当你运行npm run build时,实际上是在调用react-scripts build

总结来说,react-scripts build是一个特定于create-react-app项目的构建命令,而npm run build是一个通用的npm命令,它可以运行任何在package.json中定义的构建脚本。在create-react-app项目中,这两个命令的效果是一致的,因为它们都指向同一个构建过程。

原因:编译时生成SourceMap文件,有这个map文件,会被看见源码

解决方案:修改在package.json文件

"build": "GENERATE_SOURCEMAP=false react-scripts build",
"rbuild": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",


使用 npm run build 在Linux上创建构建.
使用 npm run rbuild 在Windows上创建去源码后显示的内部版本

效果

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

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

相关文章

PID算法学习

PID算法介绍 在过程控制中,按偏差的比例(P)、积分(I)和微分(D)进行控制的PID控制器(亦称PID调节器)是应用最为广泛的一种自动控制器。它具有原理简单,易于实…

嵌入式Linux学习——Ubantu初体验

Ubuntu 和Windows 的最大差别 Windows中的每一个分区都对应着一个盘符,盘符下可以存放目录与文件,而在Ubantu中没有盘符的概念,只有目录结构。实际上不同的目录可能挂载在不同的分区之下,如果想要查看当前目录位于磁盘的哪个分区…

【java数据结构-优先级队列向下调整Topk问题,堆的常用的接口详解】

🌈个人主页:努力学编程’ ⛅个人推荐:基于java提供的ArrayList实现的扑克牌游戏 |C贪吃蛇详解 ⚡学好数据结构,刷题刻不容缓:点击一起刷题 🌙心灵鸡汤:总有人要赢,为什么不能是我呢 …

递归的层序遍历

最近遇到一个业务需求:一颗依赖树,其实就是一颗递归树,如何一层一层的数据放在一起,可以近似理解为二叉树的层序遍历。 业务理解为递归树的层序遍历 代码示例: public class RecursionErgodic {public static void…

使用Kimi的一些体会

1、https://kimi.cn 这个回答问题还比较专业,感觉比以前chatgpt要好一些 2、Moonshot AI - 开放平台 可以通过注册账号,或微信扫描就可以登录进去 通过postman可以体会一下功能 2.1 POST https://api.moonshot.cn/v1/chat/completions 2.2 授权选择下…

达梦(DM) SQL日期操作及分析函数

达梦DM SQL日期操作及分析函数 日期操作SYSDATEEXTRACT判断一年是否为闰年周的计算确定某月内第一个和最后一个周末某天的日期确定指定年份季度的开始日期和结束日期补充范围内丢失的值按照给定的时间单位查找使用日期的特殊部分比较记录 范围处理分析函数定位连续值的范围查找…

docker部署通义千问-7B-Chat的openai-api环境

服务器环境: 显卡驱动:Driver Version: 530.30.02 CUDA版本:CUDA Version: 12.1 显卡:NVIDIA GeForce RTX 3090共4张 注意:最好把显卡驱动升级到530,CUDA版本之前使用11.7有问题。 一、下载模型文件 …

环境配置——Windows平台配置VScode运行环境为远程服务器或虚拟机

1. 远程机需要先安装SSH服务,命令如下 sudo apt install openssh-server 2. 安装好后需要开启SSH服务: sudo service sshd start 3. 查看SSH服务是否有被开启: sudo systemctl status sshd.service 4. 本地Windows需要生成密钥将公钥放…

茴香豆:搭建你的RAG智能助理-笔记三

本次课程由书生浦语社区贡献者【北辰】老师讲解【茴香豆:搭建你的 RAG 智能助理】课程 课程视频:https://www.bilibili.com/video/BV1QA4m1F7t4/ 课程文档:Tutorial/huixiangdou/readme.md at camp2 InternLM/Tutorial GitHub 该课程&…

贪吃蛇撞墙功能的实现 和自动行走刷新地图 -- 第三十天

1.撞墙 1.1最初的头和尾指针要置为空,不然是野指针 1.2 在增加和删除节点后,判断是否撞墙,撞墙则初始话蛇 1.3在撞墙后初始化蛇,如果头不为空就撞墙,得定义临时指针指向头,释放头节点 2.自动刷新地图 2.1…

解决问题:TypeError:unsupported operand type(s) for -: ‘float‘ and ‘decimal.Decimal‘

文章目录 一、现象二、解决方案 一、现象 用Pandas 处理数据的时候,想得到增长率,没想到翻车了? import pandas as pddf pd.read_csv(data.csv)df[增长率] ((df[今年] - df[去年]) / (df[今年]))执行一下语句发现报错 TypeError&#xf…

探秘MySQL主从复制的多种实现方式

欢迎来到我的博客,代码的世界里,每一行都是一个故事 探秘MySQL主从复制的多种实现方式 前言基于语句的复制原理实现方法应用场景及优缺点应用场景优点缺点 基于行的复制原理实现方法优势和适用性优势适用性 基于混合模式的复制混合模式复制的工作原理混合…