Webpack warning entrypoint size limit bundle.js

Question

Issue

In my Angular2 node application this warning appears without making any changes to my application,

Warning

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB). This can impact web performance. Assets: bundle.js (10.3 MB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance. Entrypoints: app (10.3 MB) bundle.js

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

Background

I am concerned with what the problem is. To understand it and how to fix it before it comes to needing a solution. My thought is that my design pattern is flawed.

Question

1. By changing the design pattern or architecture is this problem avoidable?

2. If so then how?

3. What exactly makes the application too large when this error is thrown?

4. Does this warning effect the application when it is in production, or only in development when using Webpack to build the project?

Answer 1

• More about this can be found at : https://github.com/webpack/webpack/issues/3216

• If you want to disable this warning :

  performance : {
      hints : false
  }        
  

• If you want to fix the issue : It was given in more detail in the above link. To simply put :

  • Use Lazy Loading of modules (this makes sure that we load some sections only if user visits that page)
  • List out which files are having more size and find a strategy to split them or reduce it's size.
  • Example to Strategy of splitting files : If we are using jQuery, Bootstrap and Fontawesome, then instead of packing all those into a single big file separate them using entry points in webpack.
  • Example to reduce files size : If we are using Bootstrap : Are we really using all of Bootstrap? If not, use some loader like bootstrap-loader which will allow us to selectively on/off features/files/functionalities from bootstrap.
  • Of course above strategies purely depends on what are the libraries that you are using in your application. I just took some examples.