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

"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