npm 運行構建不會縮小 reactJs 項目

Question

我從 reactJs App 根文件夾中執行了 npm 命令“npm run build”，並在控制台中使用下面的 output 生成了“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”，在控制台中得到了下面的 output。

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

Answer 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 下的代碼。

Answer 2

安裝 React 開發者工具擴展。 Hover 超過擴展如果它說你正在使用生產版本，那么你的文件就會被縮小。 如下圖所示。 還可以從 react 的官方文檔中閱讀有關生產構建的信息。

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