Production Build Troubleshooting
文章目录

React: Production Build Troubleshooting

对于日常使用, 执行 npm run build 即可通过 react-scripts build 一个 prod 的发布包, 但是经常会有一些问题

React Prod Build, css/js shows 404 error

很简单, package.json 里面加一行即可:

1
"homepage"".",

Unable to build in React: Failed to Minify

更新 react-scripts 的版本到 V3 即可

1
2
npm uninstall react-scripts
npm install react-scripts

Redux Extension shows in prod

(TODO)

Build 之后的文件没有混淆代码

默认的 Webpack 设置里面是不会对代码进行混淆的

为了探究原理,执行 eject 后,可以看到 webpack 配置中有这么一段

1
2
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

如果需要对代码进行混淆可以有三个办法。

删除 sourceMap 文件

最直截了当的方法就是删了 .map 文件, 简单粗暴

直接修改 package.json - scripts

1
2
3
"scripts": {
    "build""GENERATE_SOURCEMAP=false react-scripts build"
}

使用 dotenv-cli

项目根目录新建.env文件,内容如下:

1
GENERATE_SOURCEMAP=false

然后修改package.json

1
2
3
4
5
6
7
8
"scripts": {
    "start""dotenv -e .env.frm react-app-rewired start",
    "start:pro""dotenv -e .env.frm -e .env.pro react-app-rewired start",
    "build""dotenv -e .env.frm -e .env react-app-rewired build",
    "build:pro""dotenv -e .env.pro -e .env.frm react-app-rewired build",
    "test""react-app-rewired test --env=jsdom",
    "eject""react-scripts eject"
  },

Reference

https://github.com/visionmedia/debug/issues/630
https://blog.csdn.net/hahahhahahahha123456/article/details/102901643