Webpack 错误：以下资产超过了建议的大小限制（244千磅）

我曾为一个白人使用webpack，但老实说，我从未注意过构建消息（npm运行构建）

现在我开始学习一点关于webpack的知识，模块、插件等都有什么作用，我开始学习webpack生产优化。当我运行

npm run build

时，我得到警告：

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main.js (478 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (493 KiB)
      main.js
      style.css

我有一个制作网页的文件

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          mangle: {
            keep_fnames: true
          },
          compress: {
            warnings: false, // Suppress uglification warnings
            pure_getters: true,
            unsafe: true,
            unsafe_comps: true
          },
          output: {
            comments: false
          },
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          exclude: [/\.min\.js$/gi] // skip pre-minified libs
        }
      })
    ]
  },
  plugins: [
    new OptimizeCssAssetsPlugin(),
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/])
  ]
};

我在有路由的文件中使用了react代码拆分

import Async from "react-code-splitting";
const Dashboard = () => <Async load={import("../components/Dashboard")} />;
const EditExpense = () => <Async load={import("../components/EditExpense")} />;
const Header = () => <Async load={import("../components/EditExpense")} />;
const Help = () => <Async load={import("../components/Help")} />;
const NotFound = () => <Async load={import("../components/NotFound")} />;

我移动了devdependences中的所有dev包，使其不具有太多用于生产的模块

{
  "name": "React Redux Project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback",
    "build": "webpack --mode production --config config/webpack.prod.config.js --env.NODE_ENV=production --progress",
    "start:prod": "node server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.51",
    "@babel/core": "^7.0.0-beta.51",
    "@babel/preset-env": "^7.0.0-beta.51",
    "@babel/preset-react": "^7.0.0-beta.51",
    "@babel/preset-stage-2": "^7.0.0-beta.51",
    "babel-core": "^7.0.0-beta.3",
    "babel-loader": "^8.0.0-beta.3",
    "compression-webpack-plugin": "^1.1.11",
    "css-loader": "^0.28.11",
    "express": "^4.16.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.8.3",
    "normalize.css": "^8.0.0",
    "optimize-css-assets-webpack-plugin": "^4.0.2",
    "postcss-loader": "^2.1.5",
    "react-addons-shallow-compare": "^15.6.2",
    "react-code-splitting": "^1.2.1",
    "react-dates": "^16.7.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "^1.0.1",
    "uuid": "^3.2.1",
    "webpack": "^4.12.0",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3"
  },
  "dependencies": {
    "moment": "^2.22.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0"
  }
}

我的问题：当您运行

npm运行build

时，244KiB是不是每个项目都不应该达到的值？我的值是警告中建议的默认值的两倍

---

如果我的值太大，我还应该做些什么来使它变小？

我打赌现在是JS库的时刻。我也有同样的问题。按照我写的说明进行操作，并让我知道这是否有帮助

请注意，您可以通过这种方式传递道具和数据

return React.createElement(Moment.default, {format:'MM/DD/YY'}, data) 

---

要减小构建的大小，您可以使用缩小器，或者减少应用程序中所需的模块数量。请记住，您的构建将是客户端下载的内容。这取决于你选择它的大小是否足够好。编辑：你也可以在prod构建中完全删除sourcemap。我已达到应用程序运行所需的最小模块数。我从头开始创建了这个项目，当我需要它时，我会安装它。我使用uglifyjs缩小JavaScript。

return React.createElement(Moment.default, {format:'MM/DD/YY'}, data)