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

news2024/9/20 9:28:30

在使用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.coloradmin.cn/o/1633469.html

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

相关文章

spring高级篇(五)

1、参数解析器 前篇提到过,参数解析器是HandlerAdapters中的组件,用于解析controller层方法中加了注解的参数信息。 有一个controller,方法的参数加上了各种注解: public class Controller {public void test(RequestParam("…

Redux Toolkit 中持久化路由配置数组的实践指南

要将路由配置数组保存到 Redux Toolkit 中并持久化,你可以按照以下步骤进行操作: 创建一个 Slice 来管理路由配置 在 Redux Toolkit 中,我们使用 createSlice 来创建一个 slice,用于管理路由配置的状态。 import { createSlice } from reduxjs/toolkit;const routesSlice c…

【重磅】史上最全企业数字化转型项目流程管理资料大合集下载(2.5G,1429份)

重磅分享,史上最全企业数字化转型项目流程管理资料大合集,共1429份。 一、项目管理实战工具大全(甘特图、表格、项目阶段文档等527份) 二、项目管理流程规范制度(各类流程制度共86份) 三、项目管理模板&…

编译Qt6.5.3LTS版本(Mac/Windows)的mysql驱动(附带编译后的全部文件)

文章目录 0 背景1 编译过程2 福利参考 0 背景 因为项目要用到对MYSQL数据库操作,所以需要连接到MYSQL数据库。但是连接需要MYSQL驱动,但是Qt本身不自带MYSQL驱动,需要自行编译。网上有很多qt之前版本的mysql驱动,但是没有找到qt6…

Python数据结构与算法(1):将序列分解为单独的变量

问题 现在有一个包含 N 个元素的元组或者是序列,怎样将它里面的值解压后同时赋值给 N 个变量? 解决方案 任何的序列(或者是可迭代对象)可以通过一个简单的赋值操作来分解为单独的变量。 唯一的要求就是变量的总数和结构必须与序…

【数据结构7-1-查找-线性-二分法-二叉树-哈希表】

目录 1 查找基本概念2 线性表的查找2.1 顺序查找2.2 二分法查找2.3 分块查找 3 树表的查询3.1 二叉排序树3.1.1 定义3.1.2 二叉树的建立、遍历、查找、增加、删除:3.1.3 代码实现: 3.2 平衡二叉树3.2.1 平横因子3.2.2 不平横树的调整-左旋3.2.3 不平横树…

Unity 数字字符串逗号千分位

使用InputField时处理输入的数字型字符串千分位自动添加逗号,且自动保留两位有效数字 输入:123 输出:123.00 输入:12345 输出:12,345.00 代码非常简单 using UnityEngine; using TMPro;public class …

[机器学习系列]深入解析K-Means聚类算法:理论、实践与优化

目录 一、KMeans (一)Kmeans简介 (二)Kmeans作用和优点 (三)Kmeans局限和缺点 (四)Kmeans步骤 (五)如何选取最佳的K值的三种方法 (六)手肘法和目标函数的变化两种确定K值方法的区别 (七)如何选取第一次迭代的K个类中心------KMeans方法 (八)KMeans的常用参数介绍 二、…

【C语言刷题系列】对数字添加逗号

目录 一、问题描述 二、解题思路 三、源代码 拓展: 个人主页: 倔强的石头的博客 系列专栏 :C语言指南 C语言刷题系列 一、问题描述 二、解题思路 题目的要求,即对于一个较大的整数,每三位数字之间添加…

【go项目01_学习记录day01】

博客系统 1 vscode开发go项目插件推荐1.1 CtrlShiftP(俗称万能键) :打开命令面板。在打开的输入框内,可以输入任何命令。1.2 开发时,我们需要经常查阅 Go 语言官方文档,可惜因国内访问外网不稳定&#xff0…

自己手写了一个大模型RAG项目-05.基于知识库的大模型问答

大家好,我是程序锅。 github上的代码封装程度高,不利于小白学习入门。 常规的大模型RAG框架有langchain等,但是langchain等框架源码理解困难,debug源码上手难度大。 因此,我写了一个人人都能看懂、人人都能修改的大…

03-JAVA设计模式-解析器模式

解释器模式 什么是解析器模式 在Java中,解释器模式(Interpreter Pattern)是一种行为设计模式,它给定一个语言,定义它的文法的一种表示,并定义一个解释器,该解释器使用该表示来解释语言中的句子…

unity3d使用3D WebView播放网页中的视频

Unity2021.3.35f1,硬件ESP32-Cam,3D WebView插件 1.新建工程,导入3D WebView for Winfows和3D WebView for Android 2.打开场景Assets\Vuplex\WebView\Demos\Scenes\2_CanvasWebViewDemo 3.修改Canvas的Render Mode为Screen Space-Camera&am…

30秒出服装设计稿,森马用Serverless+AIGC 整“新活”!

“创新项目如何去赋能我们的业务,这件事情在森马很重要。阿里云函数计算帮我们屏蔽掉了想把AI落地到实际业务场景中 GPU 算力资源储备、采购成本、技术门槛等很多难题,从而迅速做出决策,快人一步站在正确的起点,体验新技术对整个服…

『春招实习』2023年3月春招实习求职经历

『春招实习』2023年3月春招实习求职经历 简介货拉拉一面杭州吉里一面传墨科技一面 简介 3月初我便开始陆续投递简历,直观的感受就是【投递的太晚了】,很多公司很早就开始招聘实习生了。 但是自己一直在担心没准备好,所以就想着再准备一天就投…

数据结构单链表”质检员“*2

1.随机链表的逻辑结构复制 原题链接: . - 力扣(LeetCode). - 备战技术面试?力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode-cn.com/problems/copy-list-with…

机器学习:深入解析SVM的核心概念(问题与解答篇)【三、核函数】

核函数 **问题一:为什么说是有限维就一定存在高维空间可分呢?**原始空间与特征空间为什么映射到高维空间可以实现可分核函数的作用 **问题二:最终怎么得到函数**从对偶问题到决策函数的步骤:结论 **问题三:为什么说特征…

Kafka 3.x.x 入门到精通(03)——Kafka基础生产消息

Kafka 3.x.x 入门到精通(03)——对标尚硅谷Kafka教程 2. Kafka基础2.1 集群部署2.2 集群启动2.3 创建主题2.4 生产消息2.4.1 生产消息的基本步骤2.4.2 生产消息的基本代码2.4.3 发送消息2.4.3.1 拦截器2.4.3.1.1 增加拦截器类2.4.3.1.2 配置拦截器 2.4.3…

c#数据库:1.c#创建并连接数据库

安装软件:SQL Server Management Studio Management Studio Visual Studio 2022 启动服务: 打开SQL Server Management Studio Management Studio ,连接到服务器(GUANZU是我的计算机名) 新建数据库,随便起个名字叫aq: c#代码: using System; using System.Collections.Gener…

UG NX二次开发(C++)-获取模型中所有的拉伸(Extrude)特征

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1、前言2、在UG 12中创建几个拉伸特征3、UFun中获取对象类型4、通过NXOpen过渡5.测试结果1、前言 在采用UG NX二次开发时,有时需要在模型中获取特定的对象,比如拉伸特征、关联特征等等。但是通过…