Even if you have tried to configure your webpack to reduce the size of your app to the lowest possible level, tracking is important to keep track of what is contained within your application. Because it is possible that when you install a dependency and it increases the size of the application and of course you do not know that.

This article will guide some tools to help you better understand the bundle of the app.

Keep track of the bundle size

To track the size (size) of the app you can use webpack-dashboard during development and bundlesize on CI.

webpack-dashboard

Webpack-dashboard improves the output on the webpack console with the capacity of dependencies, progress, and more. This is its interface.

This dasshboard is very useful for tracking large dependencies, and if you add a new package you will immediately see it in the modules section.

How to integrate?

• Setting

• Import into webpack config file, for example with vue app build/webpack.dev.conf.js

• Modify the server script

More details about the installation and usage can be found at the package github. https://github.com/FormidableLabs/webpack-dashboard

So every time you launch the application in a dev environment you will see this dashboard console screen to easily monitor the size of the modules.

Bundlesize

Bundlesize confirms that the webpack’s assets do not exceed the allowed size. You can integrate it into a specific CI to receive notifications when your app is bloated.

Steps to install:

Find out the maximum sizes

1. Optimize the app so that it reaches the lowest possible capacity and run the build production.
2. Add bundlesize to package.json

3. Run bundlesize with npx .

It will print out the size of each file after gzip :

4. Add 10-20% of space to each file to find maximum sizes. This 10-20% difference will allow you to work freely during the application development process, and warn when the size increases too large.

Enable bundlesize

5. Install bundlesize package.

6. Update bundlesize in package.json , adding constraints on maximum sizes.

For some files (eg images), you may need to specify the maximum size of each type instead of each file.

7. Add npm script to run the check command.

8. Reconfigure your CI so that it runs npm run check-size every time you push.

Read more: Alex Russell – Can You Afford It ?: Real-world Web Performance Budgets

Analyze why bundle is so heavy

You may want to dive deeper into the bundle to find out which modules are taking up a lot of space, so please recommend webpack-bundle-analyzer .

(Photo: https://github.com/webpack-contrib/webpack-bundle-analyzer )

The webpack-bundle-analyzer scans the entire bundle and builds a virtual map showing what is inside it. Using that virtual map you can easily see large or unnecessary dependencies.

To use it, first install the webpack-bundle-analyzer package:

Add plugin to webpack config.

Then run build production, the plugin will automatically open the statistics screen on a browser tab. By default, the statistics show the size of the files that have been parsed (the files inside the bundle). Use the left sidebar to switch between files and compare sizes.

Here are the sections you need to keep an eye on within statistics:

• Large dependencies . Why are they so big? Is there anything smaller and lighter to replace? Did you import the whole library? (for example moment.js in the image above, almost only use a few locales but import all, if removed will reduce quite a bit of space.
• Duplicated dependencies . Notice if there’s a file with the same library name? Use the optimization.splitChunks.chunks option (webpack 4) or CommonsChunkPlugin (webpack 3) to move it to a common file. Or the same library but there are many versions of the library?
• Similar dependencies . See if there are similar libraries with similar functions, you can choose to remove only one library (for example, moment and date-fns , or lodash and lodash-es ).

Read more: Sean Larkin – webpack bits: Getting the most out of the CommonsChunkPlugin ()

summary

• Use webpack-dashboard and bundlesize to always keep bundlesize app is growing.
• Dig deep into the build by viewing the size of the modules with webpack-bundle-analyzer

Combs from https://developers.google.com .