Question

当我在生产模式下运行webpack时。警告：资产大小限制（超出）。如何在没有此错误的情况下运行？

在我的项目中，我包含css，并且在webpack构建中看到一些node_module目录。但是，如果我排除CSS的node_module，则会出现错误。

以下是当我尝试使用webpack构建项目时的输出。

[mai@localhost dssoft]$ yarn run build
yarn run v1.9.2
$ webpack --config webpack.config.js
Hash: a5edfb917e6152759218
Version: webpack 4.16.3
Time: 16592ms
Built at: 08/07/2018 7:58:40 PM
                                 Asset      Size  Chunks                    Chunk Names
  f4769f9bdb7466be65088239c12046d1.eot  19.7 KiB          [emitted]         
448c34a56d699c29117adc64c43affeb.woff2  17.6 KiB          [emitted]         
 fa2772327f55d8198301fdb8bcfc8158.woff  22.9 KiB          [emitted]         
  e18bbf611f2a2e43afc071aa2f4e1512.ttf  44.3 KiB          [emitted]         
  89889688147bd7575d6327160d64e760.svg   106 KiB          [emitted]         
                             bundle.js   624 KiB       0  [emitted]  [big]  main
Entrypoint main [big] = bundle.js
 [22] ./node_modules/react-router-dom/es/index.js + 34 modules 80.3 KiB {0} [built]
      |    35 modules
 [29] ./node_modules/react-bootstrap/es/index.js + 104 modules 301 KiB {0} [built]
      |    105 modules
 [90] ./js/reducers/index.js 650 bytes {0} [built]
[116] ./node_modules/react-redux/es/index.js + 23 modules 43 KiB {0} [built]
      |    24 modules
[121] multi whatwg-fetch ./js/App.js 40 bytes {0} [built]
[122] ./js/App.js 5.17 KiB {0} [built]
[134] ./js/actions/index.js 2.31 KiB {0} [built]
[213] ./js/configureStore.js 1.4 KiB {0} [built]
[221] ./js/pages/Index.js 479 bytes {0} [built]
[222] ./js/pages/Signup.js 8.04 KiB {0} [built]
[227] ./js/pages/Login.js 7.67 KiB {0} [built]
[228] ./js/pages/Logout.js 620 bytes {0} [built]
[229] ./js/pages/NotFound.js 2.86 KiB {0} [built]
[230] ./js/pages/Events.js 3.51 KiB {0} [built]
[244] ./js/App.css 1.04 KiB {0} [built]
    + 231 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (624 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 (624 KiB)
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Done in 20.99s.

其他webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production',
  entry: [
    'whatwg-fetch',
    path.resolve(__dirname, 'src', 'App.js')
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\/node_modules\//,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.css$/,
        use: [ 
            'style-loader',
            'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
  },
};

Answer 1

您可以通过设置performance.hints = false隐藏这些警告/提示：

{
  performance: {
    hints: false
  }
}

请参见the docs for more information。

当然，这里的提示是有原因的，您应该研究减小捆绑包尺寸的方法。例如，使用代码拆分。

Answer 2

Webpacks警告大小似乎已过时。您可以将其设置为更有意义的大小限制，而不仅仅是忽略它。

performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
}

Webpack-警告资产大小限制：以下资产超过建议的大小限制（244 KiB）

2 个答案: