Question

我曾与webpack一起工作过白色，但老实说，我从未关注过构建消息（npm run build）。

现在，我开始学习一些有关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

我有一个供webpack制作的文件

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-code-splitting。

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")} />;

我在Webpack中使用差异源地图进行生产

devtool: isProduction ? "source-map" : "inline-source-map"

我将所有dev软件包移至devDependencies中，以免产生太多模块。

{
  "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 run build时，不是每个项目都应该达到的244KiB值吗？我的值是警告中建议的默认值的两倍。

如果我的价值太大，我该怎么做才能使其更小？

Answer 1

我敢打赌，现在是JS库。我有同样的问题。请按照我在this post上写的说明进行操作，并告诉我是否有帮助。

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

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

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

1 个答案: