react-scripts 和 bundle - 是否所有 'require' 和 'dependencies' 都添加到最终包中？

Question

我在一个 React 项目中工作，该项目在其 3.4.4 版中使用了 react-scripts 以及其他依赖项，我必须检查添加到最终包中的所有第三方库。

例如，如果我检查包中的 react-scripts 的需求和依赖关系-lock.json 文件：

"react-scripts": {
      "version": "3.4.4",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.4.tgz",
      "integrity": "sha512-7J7GZyF/QvZkKAZLneiOIhHozvOMHey7hO9cdO9u68jjhGZlI8hDdOm6UyuHofn6Ajc9Uji5I6Psm/nKNuWdyw==",
      "requires": {
        "@babel/core": "7.9.0",
        "@svgr/webpack": "4.3.3",
        "@typescript-eslint/eslint-plugin": "^2.10.0",
        "@typescript-eslint/parser": "^2.10.0",
        "babel-eslint": "10.1.0",
        "babel-jest": "^24.9.0",
        "babel-loader": "8.1.0",
        "babel-plugin-named-asset-import": "^0.3.6",
        "babel-preset-react-app": "^9.1.2",
        "camelcase": "^5.3.1",
        "case-sensitive-paths-webpack-plugin": "2.3.0",
        "css-loader": "3.4.2",
        "dotenv": "8.2.0",
        "dotenv-expand": "5.1.0",
        "eslint": "^6.6.0",
        "eslint-config-react-app": "^5.2.1",
        "eslint-loader": "3.0.3",
        "eslint-plugin-flowtype": "4.6.0",
        "eslint-plugin-import": "2.20.1",
        "eslint-plugin-jsx-a11y": "6.2.3",
        "eslint-plugin-react": "7.19.0",
        "eslint-plugin-react-hooks": "^1.6.1",
        "file-loader": "4.3.0",
        "fs-extra": "^8.1.0",
        "fsevents": "2.1.2",
        "html-webpack-plugin": "4.0.0-beta.11",
        "identity-obj-proxy": "3.0.0",
        "jest": "24.9.0",
        "jest-environment-jsdom-fourteen": "1.0.1",
        "jest-resolve": "24.9.0",
        "jest-watch-typeahead": "0.4.2",
        "mini-css-extract-plugin": "0.9.0",
        "optimize-css-assets-webpack-plugin": "5.0.3",
        "pnp-webpack-plugin": "1.6.4",
        "postcss-flexbugs-fixes": "4.1.0",
        "postcss-loader": "3.0.0",
        "postcss-normalize": "8.0.1",
        "postcss-preset-env": "6.7.0",
        "postcss-safe-parser": "4.0.1",
        "react-app-polyfill": "^1.0.6",
        "react-dev-utils": "^10.2.1",
        "resolve": "1.15.0",
        "resolve-url-loader": "3.1.2",
        "sass-loader": "8.0.2",
        "semver": "6.3.0",
        "style-loader": "0.23.1",
        "terser-webpack-plugin": "2.3.8",
        "ts-pnp": "1.1.6",
        "url-loader": "2.3.0",
        "webpack": "4.42.0",
        "webpack-dev-server": "3.11.0",
        "webpack-manifest-plugin": "2.2.0",
        "workbox-webpack-plugin": "4.3.1"
      },
      "dependencies": {
        "fs-extra": {
          "version": "8.1.0",
          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
          "requires": {
            "graceful-fs": "^4.2.0",
            "jsonfile": "^4.0.0",
            "universalify": "^0.1.0"
          }
        },
        "semver": {
          "version": "6.3.0",
          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
        }
      }
    },

我的问题是，所有的需求和依赖都是这样的，例如，webpack-dev-server、dotenv、sass-loader 添加到最终包中？

谢谢！

Answer 1

没有。 Webpack 最终包含的内容不是发布或报告的内容。仅使用 react-scripts 就会看到数百个模块和版本正在生产中。您在顶部添加的任何库只会增加该权重。

有了 tree shaking 和 build deps，你根本不能依赖 requires。其中一些，如 Jest 或 ESLint，仅供开发人员使用。他们没有运行时。其他人会。一些运行时依赖也会被淘汰，所以不能仅仅依靠识别库。

react-scripts 和 bundle - 是否所有 'require' 和 'dependencies' 都添加到最终包中？

react-scripts and bundle - Are all the 'require' and 'dependencies' added into the final bundle?

bundle

reactjs

webpack