Enforcing performance budgets with webpack

As you probably know, a single monolithic JavaScript bundle — once a best practice — is no longer the way to go for modern web applications. Research has shown that larger bundles increase memory usage and CPU costs, especially on mid-range and low-end mobile devices.

webpack has a lot of features to help you achieve smaller bundles and control the loading priority of resources. The most compelling of them is code splitting, which provides a way to split your code into various bundles that can then be loaded on demand or in parallel. Another one is performance hints which indicates when emitted bundle sizes cross a specified threshold at build time so that you can make optimizations or remove unnecessary code.

The default behavior for production builds in webpack is to show a warning when an asset size or entry point is over 250KB (244KiB) in size, but you can configure how performance hints are shown and size thresholds through the performance object in your webpack.config.js file.

Production builds will emit a warning by default for assets over 250KB in size

We will walk through this feature and how to leverage it as a first line of defense against performance regressions.

First, we need to set a custom budget

The default size threshold for assets and entry points (where webpack looks to start building the bundle) may not always fit your requirements, but they can be configured to.

For example, my blog is pretty minimal and my budget size is a modest 50KB (48.8KiB) for both assets and entry points. Here’s the relevant setting in my webpack.config.js:

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
  }
};

The maxAssetSize and maxEntrypointSize properties control the threshold sizes for assets and entry points, respectively, and they are both set in bytes. The latter ensures that bundles created from the files listed in the entry object (usually JavaScript or Sass files) do not exceed the specified threshold while the former enforces the same restrictions on other assets emitted by webpack (e.g. images, fonts, etc.).

Let’s show an error if thresholds are exceeded

webpack’s default warning emits when budget thresholds are exceeded. It’s good enough for development environments but insufficient when building for production. We can trigger an error instead by adding the hints property to the performance object and setting it to 'error':

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
    hints: 'error',
  }
};
An error is now displayed instead of a warning

There are other valid values for the hints property, including 'warning' and false, where false completely disables warnings, even when the specified limits are encroached. I wouldn’t recommend using false in production mode.

We can exclude certain assets from the budget

webpack enforces size thresholds for every type of asset that it emits. This isn’t always a good thing because an error will be thrown if any of the emitted assets go above the specified limit. For example, if we set webpack to process images, we’ll get an error if just one of them crosses the threshold.

webpack’s performance budgets and asset size limit errors also apply to images

The assetFilter property can be used to control the files used to calculate performance hints:

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
    hints: 'error',
    assetFilter: function(assetFilename) {
      return !assetFilename.endsWith('.jpg');
    },
  }
};

This tells webpack to exclude any file that ends with a .jpg extension when it runs the calculations for performance hints. It’s capable of more complex logic to meet all kinds of conditions for environments, file types, and other resources.

The build is now successful but you may need to look for a different way to control your image sizes.

Limitations

While this has been a good working solution for me, a limitation that I’ve come across is that the same budget thresholds are applied to all assets and entry points. In other words, it isn’t yet possible to set multiple budgets as needed, such as different limits for JavaScript, CSS, and image files.

That said, there is an open pull request that should remove this limitation but it is not merged yet. Definitely something to keep an eye on.

Conclusion

It’s so useful to set a performance budget and enforcing one with webpack is something worth considering at the start of any project. It will draw attention to the size of your dependencies and encourage you to look for lighter alternatives where possible to avoid exceeding the budget.

That said, performance budgeting does not end here! Asset size is just one thing of many that affect performance, so there’s still more work to be done to ensure you are delivering an optimal experience. Running a Lighthouse test is a great first step to learn about other metrics you can use as well as suggestions for improvements.

Thanks for reading, and happy coding!

Related Posts

Comments

  1. 547536 383423Good post. I be taught 1 thing far more challenging on entirely different blogs everyday. It will all of the time be stimulating to learn content from other writers and apply slightly one thing from their store. Id desire to use some with the content material on my blog whether you dont mind. Natually Ill give you a hyperlink on your net weblog. Thanks for sharing. 599457

  2. 154036 962408Hi, ich habe Ihre Webseite bei der Suche nach Fernbus Hamburg im Internet gefunden. Schauen Sie doch mal auf meiner Seite vorbei, ich habe dort viele Testberichte zu den aktuellen Windeleimern geschrieben. 546510

  3. 283815 630608Were glad to become visitor on this pure website, regards in this rare information! 861687

  4. 530318 681368I dont feel Ive seen all the angles of this subject the way youve pointed them out. Youre a true star, a rock star man. Youve got so much to say and know so a lot about the subject that I believe you must just teach a class about it 929766

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

21,935FansLike
2,507FollowersFollow
0SubscribersSubscribe

Recent Stories

Back to school expenses putting more pressure on post-holiday budgets

Australian parents are set to spend 9 per cent more on back to school supplies this year than they did last year, with three...

Funding higher ed: Lawmakers weigh budgets for universities – Idaho Press-Tribune

Funding higher ed: Lawmakers weigh budgets for universities  Idaho Pre

Trends vs Summary & Budgets

Hi!Hopefully someone with a bit more knowledge of the app can help me here.I’m...

Top 10 best hotels in Dublin city centre for all budgets (luxury, budget, family-stays, and more)

Heading to Dublin but not sure where to stay? We’ve checked out the ten best hotels in Dublin city centre for you — from...

Banff passes operating, capital budgets after 12 days of debate – Rocky Mountain Outlook

“The vision for your town is truly found in your budget because you’re putting your money where your mouth is,” said Mayor Corrie DiManno...