npm run build 没有缩小reactJs项目

Question

我从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”文件夹中的文件没有缩小。

包.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"
  }
}

Answer 1

这个设置显然是正确的。您所看到的只是sourcemap映射到源代码（用于调试目的），这就是您可以在浏览器开发工具下搜索的原因。

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

但是，如果您希望停止生成它，可以通过 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 下编码了。

Answer 2

安装 React 开发者工具扩展。将鼠标悬停在扩展名上，如果它表明您正在使用生产版本，那么您的文件将被缩小。正如你可以看到下面的图片。另请阅读 React 官方文档中有关生产构建的信息。

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