Entrypoint size exeeds the recommened limit (250kB)

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/

I use webpack@2.1.0-beta.27,it do not have the warning before.
The warning comes after installing all the package again.It would be great appreciated ,if there any solutions.

Author: Fantashit

19 thoughts on “Entrypoint size exeeds the recommened limit (250kB)

  1. An aside,

    Although it is subjective we’d recommend using it for dev as well! (But maybe set high size limits) that way developers dont have to be caught off guard by performance errors that could be caught in the act during dev vs prod builds.

  2. What do you think about disabling this by default for development builds?

    Developer mode build (NODE_ENV=development) React+React-DOM+React-router gives me 1.1Mb bundle. But the warning doesn’t make any sense, because with NODE_ENV=production, bundle size will be reduced and everything will be fine.

  3. So far I have solved my problem with the following configuration

    performance: {
      hints: process.env.NODE_ENV === 'production' ? "warning" : false
    },

    Don’t think any sense to show developer the size of the build with developer-warnings, hot-reloading runtime, a stuff, that is not included in production builds, where the size matters.

  4. I just ran into this issue as well. Having this error on by default seems, IMO, to be somewhat presumptuous as it is making a lot of assumptions about the users environment.

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

    Any thoughts about turning this off by default?

  5. I think on by default is sensible, otherwise no-one will know to turn it on. Perhaps the warning should include a link to the docs for how to turn it off / change the limit?

  6. I get three(!) warnings for a .js.map file being too large. Of course it’s large, it’s a map file.

    WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB). 
    This can impact web performance.
    Assets: 
      loader.js.map (539 kB)
    
    WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
    Entrypoints:
      main (614 kB)
          loader.js
          loader.js.map
    
    
    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/
    

    You’re not helping.

  7. I win! I get six(!) for a vendor bundle that goes over. Everything that gets chunked after the bundle that exceeds the limit seems to cascade a bunch of more warnings. Although, I believe even if they fixed this to become one warning, it would still be unwanted spam.

    It simply needs to be turned off by default to reduce the clutter and the unnecessary fear that this sort of message is going to induce in new programmers.

    WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
    This can impact web performance.
    Assets:
      vendor.bundle.js (2.93 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:
      vendor (3.06 MB)
          polyfills.bundle.js
          vendor.bundle.js
    
      angularjs (3.08 MB)
          polyfills.bundle.js
          vendor.bundle.js
          angularjs.bundle.js
    
      zen (3.1 MB)
          polyfills.bundle.js
          vendor.bundle.js
          angularjs.bundle.js
          zen.bundle.js
    
      zenexamples (3.15 MB)
          polyfills.bundle.js
          vendor.bundle.js
          angularjs.bundle.js
          zen.bundle.js
          zenexamples.bundle.js
    
      signalrmonitor (3.16 MB)
          polyfills.bundle.js
          vendor.bundle.js
          angularjs.bundle.js
          zen.bundle.js
          zenexamples.bundle.js
          signalrmonitor.bundle.js
    
      zenangularjsexamples (3.16 MB)
          polyfills.bundle.js
          vendor.bundle.js
          angularjs.bundle.js
          zen.bundle.js
          zenexamples.bundle.js
          signalrmonitor.bundle.js
          zenangularjsexamples.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/
    
  8. Hi guys i got this error please help me anyone

    const path = require("path");
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    const NODE_ENV = process.env.NODE_ENV || "development";
    const webpack = require("webpack");
    const tinypngCompress = require("webpack-tinypng-compress");
    
    const config = {
    	entry: "./common.js",
    	output: {
    		path: path.resolve(__dirname, "dist"),
    		filename:"bundle.js",
    		publicPath:"dist/"
    	},
    	// performance: {
    	// 	maxEntrypointSize:400000
    	// },
    	module: {
    		rules: [
    			{
    				use:"babel-loader",
    				test: /\.js$/,
    			},
    			{
    				loader:ExtractTextPlugin.extract({
    					loader:"css-loader",
    					options: {minimize:true}
    				}),
    				test: /\.css$/,
    			},
    			{
    				test: /\.(jpe?g|png|gif|svg)$/,
    				use: [
    					{
    						loader:"url-loader"
    if i uncommend this line i got an error that image size is too big but if this line	will remain as it was i got error that style.css size is to large 					// options:{ limit:1000, name:"[name].[ext]" } 
    					},
    					"image-webpack-loader"
    				]
    			}
    		]
    	}, 
    	plugins: [
    		new ExtractTextPlugin("style.css"),
    	]
    };
    if (NODE_ENV == "production") {
    	config.plugins.push(
    		new webpack.optimize.UglifyJsPlugin({
    			compress:{
    				warnings:false,
    				drop_console:true,
    				unsafe:true
    			}
    		})
    	);
    }
    module.exports = config;
    

    Please help me guys SOS

  9. On a somewhat unrelated note, it would be great if we could set this value. 244kb is too small for me, but I would love to be able to set or at least override the default value, instead of just disabling it all together

  10. Could someone enlighten me on why there is a warning at all about entrypoint size? If a webapp requires X size of scripts in order to function, then that is just what it is. You can’t do anything about it. For example if you have a big web app that requires 500kb of JavaScript on page loads, you can’t really escape from that. There may be places where you can optimize via dynamic imports, but if you can’t then you just can’t. Right? You can give someone performance hints all day long but it doesn’t mean people are always able to abide by those hints/rules for their web app.

  11. Landed here from Google as I wanted to see if the warning was significant and if there was anything I could do to improve the size – I’m a stickler. But reading this issue is madness. There is an argument both for and against this warning.

    In my opinion the warning should be kept IF there is sufficient documentation that can advise the user on how to reduce the size. Otherwise it’s pointless because there is nothing the user can do to address the warning. For new users it will lead to frustration.

    I’m an advanced user and warnings don’t sit well with me. They lurk in my mind and cause too many questions about my competence. But maybe that’s just me.

    If there’s no docs to support the warning it should defiantly be removed.

    That’s my 2 cents.

  12. @Jakobud

    Could someone enlighten me on why there is a warning at all about entrypoint size?

    Because if your app requires 5MB to work, then (new) visitors will be staring at a blank white page wondering how long to wait, as it loads. A better way to do things is to have a very small loading “splash” screen. A new visitor will then be greeted by this screen almost immediately, while the bulky stuff loads up in the background. You might even consider a progress bar as the chunks load in.

  13. being this is completely configurable, i would say it is a positive feature.

    if you don’t care how large your entry is, turn it off!

    if you do care and want to be notified, set the limits to what you expect. this way if you have new devs on your team and they add some absurdly large package to do an absurdly straight forward task… it’ll fire off a warning! quite useful, actually.

    edit: it also keeps you honest and gives you goals to shoot for… once your entry is getting too large it is time to start splitting files

  14. I’m still confused. Other than to disable the warning what should I do with the warning? Mine says…
    WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

    Does this mean I should do something different? Or does it just mean “Oh, cool you have a really big app!”. In that case it seems utterly meaningless.

Comments are closed.