1. 19
    Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
    5m 52s

Analyze a Production JavaScript Bundle with webpack-bundle-analyzer

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet

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
Alex Wardi
~ 2 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
Andy Van Slaarsinstructor
~ 2 years ago

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