react 脚手架 run eject 之后 打包生成map文件 体积过大

react 脚手架 打包生成map文件 体积过大

写在前面,map文件是帮助我们查看报错的位置的。map文件由devtool属性控制,

  • 然后全文搜索devtool
  • 发现在webpack.config.js文件 150 行的位置。这里不建议注释掉(虽然网络上有很多人这么说).这里代码表现为:
devtool: isEnvProduction
      ? shouldUseSourceMap
        ? 'source-map'
        : false
	  : isEnvDevelopment && 'cheap-module-source-map',
	//   很容易发现 是由`shouldUseSourceMap`变量控制的。
  • 然后全文搜索shouldUseSourceMap
  • 发现在webpack.config.js文件 33 行的位置
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

这里发现,map文件是由process.env.GENERATE_SOURCEMAP控制的,当这个变量设置为trueorfalse时,对应的控制build出来的map文件,有 还是 无。

  • 然后全文搜索process.env
    主要是确认官方的脚手架,是否设置了环境变量,结果不出所料。在scripts文件夹内的三个build.jsstart.jstest.js文件内均有变量设置。所以,我们只需要在打包的时候,设置这个属性就好了,即在build.js文件内,最上方加入一条process.env.GENERATE_SOURCEMAP = 'false';即可
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';

+ process.env.GENERATE_SOURCEMAP = 'false';
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值