Dev/Javascript/React
Source Edit History
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