npm run build 没有缩小 reactJs 项目答案

【问题标题】：npm run build is not minifying the reactJs projectnpm run build 没有缩小 reactJs 项目
【发布时间】：2021-04-04 08:47:35
【问题描述】：

我从 reactJs App 根文件夹执行了 npm 命令“npm run build”，并在控制台中使用以下输出生成了“build”文件夹。

    File sizes after gzip:

  646.8 KB  build\static\js\2.d370d4e1.chunk.js
  12.46 KB  build\static\js\main.fec451dd.chunk.js
  823 B     build\static\css\main.fc109ae9.chunk.css
  772 B     build\static\js\runtime-main.83c3e0c4.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

然后我执行命令“serve -s build”并在控制台中得到以下输出。

INFO: Accepting connections at http://localhost:5000

我可以看到所有 *.tsx 文件未在开发人员工具中缩小。不知道我做错了什么以及为什么下面提到的“js”文件夹中的文件没有被缩小。

package.json

 {
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.68",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "node": "^15.4.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "3.4.3",
    "typescript": "^3.7.5",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prod": "webpack --mode production"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "ts-loader": "^8.0.12",
    "typescript": "^3.7.5",
    "webpack-cli": "^4.3.0"
  }
}

【问题讨论】：

标签： reactjs minify react-scripts npm-build

【解决方案1】：

设置显然是正确的。你看到的只是sourcemap，它是为了映射到源代码（用于调试目的），这就是你可以在浏览器devtool下搜索的原因。

基本上sourcemap是在webpack配置文件中默认设置cra生成的。

但是，如果您希望停止生成它，您可以通过 CLI 来完成：

package.json

{
  "scripts": {
    // ...
   "build": "GENERATE_SOURCEMAP=false react-scripts build",
    // In case of using Windows:
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
  }
}

然后你将不再看到你在 devtool 下的代码。

【讨论】：

我添加了“build”：“GENERATE_SOURCEMAP=false react-scripts build”。当我执行“npm run build”时出现错误“'GENERATE_SOURCEMAP' 未被识别为内部或外部命令”，
看起来你使用的是 Windows，那么命令会有点不同。再看看我更新的答案
是的，我正在使用 Windows。即使根据您更新的答案使用“GENERATE_SOURCEMAP=false”，文件也不会被缩小。在开发人员工具中，我可以在 "localhost:5000->static->js 中找到所有完整文件
您是否检查了您的build/static/js 以确保没有文件.map（如果仍有地图文件，则您的命令无法正常工作）？另请保留一份build 命令脚本。
你是对的，我仍然可以在 js 文件夹中看到 3 个地图文件。我手动删除了这 3 个地图文件，现在在开发人员工具中我没有看到任何原始 tsx 文件。非常感谢您指出地图文件！即使使用“GENERATE_SOURCEMAP=false”，仍然不知道为什么会生成地图文件

【解决方案2】：

安装 React 开发者工具扩展。如果它说您正在使用生产版本，则将鼠标悬停在扩展上，然后您的文件将被缩小。正如您在下面看到的image。还可以从 react 的官方文档中阅读有关生产构建的信息。

https://reactjs.org/docs/optimizing-performance.html

【讨论】：