Webpack - WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

Question

When I run webpack in production mode. There is a warning that asset size limit (exceed). How can I run without this error?

In my project, I include css, and I see some node_module directory include in the webpack build. But if I exclude node_module of css it will have the error.

The following is the output when I try to build my project with 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.

Additional 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

Webpacks warning size seems out of date. Instead of just ignoring it you can set it to a more meaningful size limit inside the module.exports object.

    module.exports = {
       ....
       performance: {
            maxEntrypointSize: 512000,
            maxAssetSize: 512000
       },
       ....
    }

Answer 2

You can hide these warnings/hints by setting performance.hints = false:

{
  performance: {
    hints: false
  }
}

See the docs for more information.

Of course, the hint is there for a reason and you should look into ways of reducing your bundle size. For example by using code splitting.