首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >错误:以下资产超出了建议的大小限制(244 KiB)

错误:以下资产超出了建议的大小限制(244 KiB)
EN

Stack Overflow用户
提问于 2018-06-22 16:51:30
回答 1查看 4.9K关注 0票数 3

我和webpack一起工作过,但老实说,我从来没有注意过构建消息(Npm run build)。

现在我开始学习一点关于webpack的知识,什么是模块,插件等等,我开始对webpack的产品进行优化。当我运行npm run build时,我得到警告:

代码语言:javascript
运行
复制
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制作的

代码语言:javascript
运行
复制
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-react。

代码语言:javascript
运行
复制
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中使用了diff源码地图进行生产

代码语言:javascript
运行
复制
devtool: isProduction ? "source-map" : "inline-source-map"

我移动了devDependencies中的所有开发包,使其不会有太多用于生产的模块。

代码语言:javascript
运行
复制
{
  "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是不是每个项目都不应该达到的值?我的值是warning中推荐的默认值的两倍。

如果我的值太大,我还应该怎么做才能使它变小呢?

EN

Stack Overflow用户

发布于 2018-07-10 11:31:18

我打赌这是JS库的时刻。我也有同样的问题。按照我在this post上写的说明,让我知道这是否有帮助。

请注意,您可以用这种方式传递属性和数据

代码语言:javascript
运行
复制
return React.createElement(Moment.default, {format:'MM/DD/YY'}, data) 
票数 1
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50984192

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档