Posted over 2 years ago. Visible to the public. Repeats.

Webpack(er): Analyze the size of your JavaScript components

We're always striving towards keeping our website's JavaScript as small as possible.

If you're using webpack(er), you can use the webpack-bundle-analyzer plugin Archive to get a good overview, which of your JavaScript modules take up how much space, and where you can optimize.

To use it, add it via npm or yarn

yarn add webpack-bundle-analyzer

Then add this to your environment.js:

// Uncomment this code to show statistics of bundle sizes. Generated file will automatically open in your browser. // Compile with NODE_ENV=production bin/rake assets:precompile const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; environment.plugins.append( 'BundleAnalyzer', new BundleAnalyzerPlugin({ analyzerMode: 'static' }) )

Then compile using the production environment. In a Webpacker project, this can be done with

NODE_ENV=production bin/webpack

An interactive graph like this will open in your browser:


The large chunks are the separate bundles (this application uses more than one). Important metrics are "Parsed size" (the amount of JavaScript the browser has to parse) and "Gzipped size" (the amount of data going over the wire).

When done, comment out the code in your environment.js.

You should do check your bundle size at least once before bringing an application into production.

Flaky tests are tests that sometimes fail for no obvious reason. They are the plague of many end-to-end (E2E) test suites that automate the browser through tools like Capybara and Selenium.

Join our free training event and learn to fix any flaky test suite, even in large legacy applications.

Owner of this card:

Tobias Kraze
Last edit:
over 2 years ago
by Tobias Kraze
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Tobias Kraze to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more