react项目关闭sourcemap

weixin_45894046

已于 2024-09-19 20:50:02 修改

阅读量893

点赞数

CC 4.0 BY-SA版权

文章标签： react.js 前端 javascript webpack

于 2023-02-08 15:01:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45894046/article/details/128935827

文章介绍了两种方法来禁用React应用的sourcemap。方案一是通过修改package.json文件，设置环境变量GENERATE_SOURCEMAP为false。方案二是eject项目后直接修改webpack.config.js文件中的shouldUseSourceMap配置。这样可以加快构建速度并提高隐私保护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方案一：在package.json修改

{
    "scripts": {
        "start": "react-scripts start",
        "build": "set GENERATE_SOURCEMAP=false&& react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
}

方案二：使用eject暴露出配置文件时，修改webpack.config.js

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_45894046

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用React脚手架搭建项目，取消生成.map文件

a1255215696的博客

05-20

834

有两种方法：使用react-app-rewired customize-cra, 修改config-overrides.js文件 const { override, } = require("customize-cra"); const path = require("path"); module.exports = override( (config) => { config.resolve.alias = { "@": path.resolve(__dirname

设置环境变量关闭react-scripts的sourceMap生成

缤纷冷泪的专栏

06-15

1193

关于GENERATE_SOURCEMAP的作用原理在这篇文章中介绍过。 create-react-app ：不产生source-map来缩减打包文件体积可以通过创建.env环境变量文件影响react-scripts start/build等命令。其实还有另一种更灵活的方式设置环境变量,使用export可以对不同的命令设置不同的环境变量. 打开package.json，找到scripts配置项 "scripts": { "start": "react-scripts start", "b

参与评论您还未登录，请先登录后发表或查看评论

[react] 在React中如果去除生产环境上的sourcemap？

歌谣的博客

11-19

457

[react] 在React中如果去除生产环境上的sourcemap？ GENERATE_SOURCEMAP=false react-scripts build If you use the Create-React-APP 个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题 ...

react项目打包时关闭source-map产生的.map文件

Beamon__的博客

01-30

1677

react项目打包时关闭source-map产生的.map文件

如果本地项目起服务，有报错，可以使用 GENERATE_SOURCEMAP=false 忽略本地文件

最新发布

lixinhua_man的博客

06-18

243

如果本地项目起服务，有报错，可以使用 GENERATE_SOURCEMAP=false 忽略本地文件。

Webpack关闭SourceMap

夜雨Gecer的博客

12-07

3662

只需将【productionSourceMap】设置为falsevue.config.js文件二. 未使用VueCli的Webpack项目需要将【devtool】设置为 false 三. 其他情况当完成以上设置后还是出现sourcemap，可以看一下通过【cdn】引入的库，如下图这种则需要将代码下载到本地后删除最后一行，之后用本地文件替换远端文件。

React | 关闭sourceMap,减小包体积

u011607490的博客

10-14

3926

打开文件webpack.config.prod.js，搜索“shouldUseSourceMap”，找到第一个结果，注释掉这一行，另起一行把它的值改为false const shouldUseSourceMap = false;

create-react-app 生产环境去除sourcemap

徐同保的专栏

06-15

800

{ "script": { "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js" } }

react 脚手架打包不生成 sourceMap 的解决方案

纯爱枫若情的博客

09-28

4644

react 脚手架打包不生成 sourceMap 的解决方案前言我相信很多前端工程师都跟我一样，用惯了开源的项目脚手架工具以后，都不习惯自己配置 webpack 了。经常听同行们开玩笑说，某某某个公司要启动一个项目，所有的人员都配置好了，就缺一个首席 webpack 工程师了。虽然是一句玩笑话，但是从侧面也反映出来了，想把 webpack 配置好，是不多么不容易的事情。自己动手给项目配置 ...

vue或react项目生产环境去掉console.log的操作

10-14

在构建Vue或React项目时，开发过程中我们通常会在控制台使用console.log()、***()、console.debug()等方法来打印日志信息，帮助我们调试程序。然而，在将应用程序部署到生产环境时，这些日志信息就不再需要了。此时...

后端程序员玩前端 react build map 文件去除

narojay的博客

10-05

1325

前言昨天上线站点之后发现网站访问巨慢，浏览器断点之后发现是build 生成的map文件太大，我腾讯云服务器的带宽就1兆,这玩意直接占了几兆，服务器带宽直接崩了，那这些map文件到底是干啥的呢？查了下解释如下： Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。 source map 实际上就是一个打包后 js css的定位器，让打包后的代码可以在浏览器直接看到，但是我的博客网站并不需要这些，所以需要关闭。如何去除build生成的sou

React.js前端项目的代码压缩与混淆策略

小白菜的博客

05-15

707

在现代Web开发中，React.js已成为最受欢迎的前端框架之一。随着应用规模的扩大和业务复杂度的提高，前端代码的保护和优化变得尤为重要。提高应用性能，减少资源加载时间增强代码安全性，防止逆向工程优化用户体验，提升页面加载速度实现更好的SEO效果本文涵盖从基础概念到高级技巧的全方位内容，适用于各种规模的React项目。第2章介绍核心概念与技术联系第3章深入分析压缩与混淆算法原理第4章建立数学模型和性能评估标准第5章通过实际项目案例展示实现方法第6章探讨不同应用场景下的策略选择。

uniapp-vue2关闭sourceMap的生成，提高编译、生产打包速度

weixin_52830464的博客

11-28

983

遇到问题：由于微信小程序引入了mpvue-echarts\echarts.min.js，文件体积超过 500KB，影响性能，本地运行到微信小程序模拟器太慢了。文件，可以关闭source map的生成，从而提高编译、生产打包的速度。

Vue项目打包：禁止生成sourceMap文件

醉殇姒若梦遗年ツ的博客

04-11

2092

sourceMap的主要作用是让打包后的文件像未压缩的代码一样，方便调试和定位错误。然而，在生产环境中我们通常不需要这些文件，因为它们会增加应用程序的体积。

react脚手架开发uTools工具打包时去掉.map文件的解决方案

Mitchell1696的博客

02-10

735

用react脚手架项目开发utools工具时，若直接用默认打包后的文件提交审核，大概率会被撤回；原因也是会很清楚的告诉我们：“插件内请勿包含.js.map, .css.map 调试文件”。因此，笔者将盘点react脚手架项目打包去掉.map文件的解决方案。

create-react-app ：不产生source-map来缩减打包文件体积

缤纷冷泪的专栏

10-15

5636

用create-react-app 脚手架创建的react项目，使用npm run build打包后，默认会产生source-map文件，通常项目上线后这种文件是不必要的。现在需要配置以关闭这种文件的产生。打开项目的package.json文件，找到下面类似的配置 "scripts": { "analyze": "source-map-explorer 'build/static/js...

SourceMap源码映射

m0_67298484的博客

10-25

642

我的项目已经使用npm run build打包，然后通过nginx反向代理将前后端连接，打包后的代码均为后缀为.js或者.map的文件，但控制台可以看到我开发环境的jsx文件，于是我打开控制台Sources源代码。如图可见，我在开发环境下的目录和jsx文件都原封不动的暴露在了生产环境下的控制台，这令我十分疑惑，于是我在网上翻阅了大量的文章，原来这个是webpack工具的配置项。当然如果您是在开发环境下，还是建议您开启脚手架的SourceMap，这样有利于我们更快更清晰的定位bug和错误。

Source Map

m0_63400611的博客

05-07

375

Source Map 就是一个信息文件,里面存储着位置信息,Source Map 文件中存储着压缩混淆后的代码,所对应的转换前的位置有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,极大的方便后期的调试开发模式下默认Source Map 问题开发环境下默认生成的 Source Map 记录的是生成后的代码的位置,会导致运行时报错的行数与源代码的行数不一致的问题解决默认Source Map 问题开发环境下,在 webpack.config.js 中添加如下的配置,

bilibili尚硅谷Webpack5(高级进阶篇) 学习记录(二)

weixin_43919348的博客

06-06

529

configFactory webpack将开发环境和生产环境都整合到了一个文件，所以我们从这一个配置文件就可以分析开发环境和生产环境分别做了什么事情 webpack.config.js webpack.config.js里有所有的配置文件，在它的头部，引入了很多的插件，模块。此句判断最终是否要生成sourcemap文件，如果定义了环境变量就不生成，如果没有定义，GENERATE_SOURCEMAP是undefined，最终的shouldUseSourceMap为true const shouldUseS

react项目打包怎么配置可以实现忽略报错

03-26

| `source-map-explorer` | 分析构建错误来源 | `npm install source-map-explorer` | | `eslint-loader` | 只检查不阻断构建 | `npm install eslint-loader` | --- **总结**：忽略构建报错可通过配置实现，但本质...