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。我无法弄明白。当整个源文件夹只有600KB（包括图像和其他资源）时，为什么JS包如此之大？

Answer 1

我怀疑你的一些依赖是非常沉重的。

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

2）react-chartjs-2：使用相当大的chartjs。对它没什么可做的。

3）时刻：不是太大但并不总是需要。如果您只是将它用于简单的日期格式化，那么最好自己编写一个实现。此刻还有语言环境支持。这将为捆绑包大小增加很多。

我仍然在这里猜测。您可以使用这个出色的工具来分析捆绑包：https://github.com/chrisbateman/webpack-visualizer

Answer 2

如果您只需要将日期转换为ISO-Lang，则不要使用库。对我来说，我尝试了时刻，但它将我的bundle.js从260K炸到了508K。

现在我创建了一个单行程序，用于将日期从RFC3339时间戳转换为德语类型日期：

Date(props.value).toLocaleString("de-DE",{year: "numeric", month:"2-digit",day: "2-digit"}).split(",")[0];

props.value ，在我的案例中是RFC3339时间戳。

你可以用以下方式模拟：

new Date( Date.now()).toISOString()

所以整条线变成了：

new Date(new Date( Date.now()).toISOString()).toLocaleString("de-DE",{year: "numeric", month:"2-digit",day: "2-digit"}).split(",")[0]

React + Webpack / Create-React-App：非常大的捆绑包大小

2 个答案: