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';
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值