How to exclude certain files in performance budget

Hi back again to my blog. As you may know, I'm currently running a software development agency. One of our client is in the process of optimizing their webpack build. One of the step we take is to have performance budget in their webpack setting.

I can easily setup something like this in the webpack to enable the performance budget

module.exports = {
  //...
    performance: {
      hints: 'error', // throw non-zero exit code on console if not comply
      // multiply by 1024 to make it in KiB
      maxAssetSize: 250 * 1024,
      maxEntrypointSize: 300 * 1024,
    },
};

In the above example I set the maxAssetSize and maxEntrypointSize and return non-zero exit code on build if there's violation. However, one of the use case of our client is they have an image that can be consider as screenshots that they use to register their frontend build to a 3rd party service. So in this case we can exclude that assets to the performance budget calculation. If the name of the file is screenshot.png, I can set up the following to make webpack ignore the file in the calculation.

module.exports = {
  //...
    performance: {
      // Read the following for more info https://webpack.js.org/configuration/performance/#performanceassetfilter
      assetFilter(assetFilename) {
        const excludedFiles = ['screenshot.png'];
        if (excludedFiles.includes(assetFilename)) {
          return false;
        }
        return !/\.map$/.test(assetFilename);
      },
      hints: 'error', // throw non-zero exit code on console if not comply
      // time 1024 to make it in KiB
      maxAssetSize: 250 * 1024,
      maxEntrypointSize: 300 * 1024,
    },
};

By doing that I turned something like the following to a success build on the webpack build.

ERROR in asset size limit: The following asset(s) exceed the recommended size limit (250 KiB).
This can impact web performance.
Assets: 
  screenshot.png (338 KiB)

To learn more as the code comment said you can visit the official Webpack documentation here.

About Me 😄

I'm Abdurrachman and currently, I'm managing a software development agency called Kulkul.tech. We're a web and mobile software development company providing excellent software for business. We're working with companies all over the world from a single-person business to large corporates. We are a solid remote-first firm with a high emphasis on people and clear communication.

We begin each project with understanding the client's business and problem then provide a contextual solution and applicable technology. We make sure that cooperation with us develops the business of our client.

We provide excellent engineers and designers to deliver a complete product from spec gathering, product road mapping, UI/UX design, development, QA, and DevOps.
We're experts in the following technologies:

• JavaScript and Node.js
• Python and Django
• Ruby on Rails,
• Mobile (iOS and Android) especially Flutter
• DB: MySQL, PostgreSQL, MongoDB,
• Frontend: Elm, React, Angular

We working in Codementor too, please reach me in Codementor if you're interested.