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

server/2024/12/22 9:31:16/

在使用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.ppmy.cn/server/18990.html

相关文章

了解Cookie登录:原理、实践与安全指南

什么是Cookie登录? Cookie是什么 当你首次登录网站时,你会输入用户名和密码。在后台,网站的服务器验证这些凭据是否正确。一旦确认你的身份无误,服务器就会创建一个Cookie,并将其发送到你的浏览器。这了解Cookie登录…

关于discuz论坛网址优化的一些记录(伪静态)

最近网站刚上线,针对SEO做了些操作,为了方便网站网页被收录,特此记录下 1.开启伪静态 按照操作勾选所有项,然后点击查看伪静态规则 2.打开宝塔,找到左侧列表的网站,然后找到相应站点的设置。把discuz自动…

Java毕业设计 基于SpringBoot vue城镇保障性住房管理系统

Java毕业设计 基于SpringBoot vue城镇保障性住房管理系统 SpringBoot 城镇保障性住房管理系统 功能介绍 首页 图片轮播 房源信息 房源详情 申请房源 公示信息 公示详情 登录注册 个人中心 留言反馈 后台管理 登录 个人中心 修改密码 个人信息 用户管理 房屋类型 房源信息管理…

pytorch-解决过拟合之regularization

目录 1.解决过拟合的方法2. regularization2. regularization分类3. pytorch L2 regularization4. 自实现L1 regularization5. 完整代码 1.解决过拟合的方法 更多的数据降低模型复杂度 regularizationDropout数据处理早停止 2. regularization 以二分类的cross entropy为例&…

桶排序(Bucket Sort)

. - 力扣(LeetCode) 这道题可以使用桶排序来做 桶排序(Bucket Sort)是一种排序算法,其工作原理是将数组分到有限数量的桶子里。每个桶子再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序…

Pytorch:Dataset类和DataLoader类

文章目录 一、Dataset 类1、定义2、示例 二、DataLoader 类1、定义2、参数3、示例:使用 DataLoader 三、总结四、实战1、load_data函数:2、IrisDataset类3、DataLoader 的使用 在机器学习和深度学习框架中,尤其是在 PyTorch 中,Da…

SQLite FTS3 和 FTS4 扩展(三十二)

返回:SQLite—系列文章目录 上一篇:SQLite 的命令行 Shell(三十一) 下一篇:SQLite—系列文章目录 概述 FTS3 和 FTS4 是 SQLite 虚拟表模块,允许用户执行 对一组文档进行全文搜索。最常见(和最有效…

嵌入式学习Day19

输入一个数字,实现数字的逆置,不使用字符串截取的方式 代码: #!/bin/bash echo number reverse read -p "please number:" num t0 while [ $num -ne 0 ] dot$((t*10num%10))((num/10)) done echo $t运行结果&#xff…