reactjs - react + 网络包/创建 react 应用程序 : Very Big Bundle Size

Question

我正在为我的项目使用 create-react-app。我的 src 文件夹大小为 600KB。这是项目的依赖项。

 "devDependencies": {
    "eslint": "3.12.2",
    "eslint-config-standard": "6.2.1",
    "eslint-plugin-promise": "3.4.0",
    "eslint-plugin-react": "6.8.0",
    "eslint-plugin-standard": "2.0.1",
    "react-scripts": "0.8.4",
    "react-svg-inline": "1.2.0"
  },
  "dependencies": {
    "axios": "0.15.3",
    "chart.js": "2.4.0",
    "clipboard": "1.5.16",
    "jwt-decode": "^2.1.0",
    "moment": "2.17.1",
    "react": "15.4.1",
    "react-chartjs-2": "2.0.0",
    "react-copy-to-clipboard": "4.2.3",
    "react-datepicker": "0.40.0",
    "react-dom": "15.4.1",
    "react-dropdown": "1.2.0",
    "react-highlight": "0.9.0",
    "react-ladda": "5.0.5",
    "react-redux": "5.0.1",
    "react-redux-loading-bar": "2.6.5",
    "react-router": "3.0.0",
    "react-router-redux": "4.0.7",
    "react-select": "1.0.0-rc.3",
    "react-spinner": "0.2.6",
    "react-tap-event-plugin": "2.0.1",
    "redux": "3.6.0",
    "redux-thunk": "2.1.0",
    "react-dropzone": "3.11.0"
  },

当我构建时，我注意到生成的 JS 包大约有 1.7MB。我想不通。为什么 JS 包这么大，而整个源文件夹只有 600KB，包括图像和其他 Assets ？

Answer 1

我怀疑您的某些依赖项非常大。

1) react-highlight:使用 highlight.js，它可能会导入所有语言支持。如果您只格式化一种或两种语言，则可以删除其余部分

2) react-chartjs-2:使用 chartjs，它也相当可观。对此无能为力。

3) 时刻:不是太大但并不总是需要。如果您只是将它用于简单的日期格式化，您最好自己编写一个实现。 moment 还带有语言环境支持。这将大大增加 bundle 的大小。

我还在猜测。您可以使用这个出色的工具来分析 bundle :https://github.com/chrisbateman/webpack-visualizer