Analyze a Production JavaScript Bundle with webpack-bundle-analyzer

webpack

Share this video with your friends

Bundle size has a huge impact on JavaScript performance. It's not just about download speed, but all the JavaScript we ship to the browser needs to be parsed and compiled before it can be executed. Keeping our bundle in check can be difficult, but it's much easier when we can see where the bloat is coming from. In this lesson, we'll add the webpack-bundle-analyzer plugin to inspect the output of our production build.

Alex Wardi

~ 6 years ago

Thanks for the excellent rundown on webpack, Andy!

I ran into something quite interesting regrading the webpack-bundle-analyzer plugin section. Webpack will automatically use the concatenateModules optimization, which may obscure the problem areas when viewing the analyzer html page.

My largest chunk was showing something like index.js + <n> modules (concatenated) on the analyzer HTML page. After altering my webpack.config.prod.js file to skip module concatenation, the analyzer page showed the full output for the chunk. Here's what I did:

module.exports = merge(baseConfig, {
    mode: 'production',
    stats: 'minimal',
    plugins: [new BundleAnalyzerPlugin({
        analyzerMode: 'static'
    })],
    optimization: {
        concatenateModules: false // Add this flag to view all modules. Should be used for debugging only. Remove for actual prod build
    }
});

Hopefully this helps someone else in the future. Thanks again, great lesson!!

Andy Van Slaars(instructor)

~ 6 years ago

Thanks for sharing, Alex. This is a great tip!