3

我从 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"
  }
}
4

2 回答 2

3

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

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

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

于 2020-12-27T05:26:33.550 回答
0

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

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

于 2020-12-27T05:26:09.987 回答