React打包去掉.map文件的几种方式
网上常见的方法有四种
方法一: 直接修改配置文件
- 在node_modules文件夹中找到react-scripts包路径/node_modules/react-scripts/config/webpack.config.prod.js
- 找到const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';将这一行代码注释
- 在下面添加一行 const shouldUseSourceMap = false;
- 重启终端，重新打包
// const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const shouldUseSourceMap = false ;
image-20201028222415979
生成文件如下图:
image-20201028222540412
方法二: 使用react-app-rewired,并配置
module.exports = function override(config, env) {
// 添加一行这个代码,关闭
config.devtool = false
}
注意点:
如果使用了react-app-rewired,那么要注意版本是1.6.+,
-
修改devtool=false,只会将.js.map文件删除
image-20201028223219678
方式三: 修改生产环境的打包指令
- 安装cross-env
yarn add cross-env
- 修改package.json中的scripts区域的代码
"scripts": {
"start": "react-app-rewired start",
// 生产环境写下 cross-env GENERATE_SOURCEMAP=false
"build": "cross-env GENERATE_SOURCEMAP=false react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
- 再次执行yarn build,你会发现很神奇事情
image-20201029060809328
方式四:添加.env文件修改变量
1.在根目录下创建 .env文件
2.里面写入
GENERATE_SOURCEMAP = false
3.执行yarn build
image-20210104192342365
tips:
yarn eject 项目后发现了 react 会加载根目录下的.env文件
image-20210104192840462
env.js
image-20210104193510207
如果我们要定义变量 必须通过 REACT_APP_XXXX = xxx 形式,因为加载时候进行了正则表达式的匹配
image-20210104192742188
总结
- 生产环境时,遇到要把.map文件去掉,方式一要修改node_modules包中的文件比较麻烦,如果经常去删除node_modules,那么你就要经常去修改里面的文件,十分繁琐
- 方式二只能取出.js.map的文件,并不能取出.css.map文件
- 方式三也是查询资料找到了,简单修改了scripts标签中打包生产环境的指令就可以实现了，更加简单方便。
- 方法四(推荐),感谢大佬的留言
👉有更好的方案欢迎留言
