• WEBPACK

    Visualizing the Size of your Vue/React/Angular Bundles

    Knowing exactly what and how much each individual bundle in your project is used can help you optimize your project. If your web application is packaged with Webpack, there are a few ways you can analyze your bundles.

    Analyzing Bundles

    There is a handful of third-party packages that will allow you to get a more detailed view of exactly what modules in your application are being used and how significant they are to your project in terms of size. “webpack-bundle-analyzer is one that I use frequently. This plugin renders and opens a webpage with information about your bundles after you run a build. It also gives you three separate views: parsed, stat, and gzipped.

    webpack-bundle-analyzer rendered page after running “vue-cli-service build — mode production”

    How to use

    Open a terminal with the path to your application and execute the command npm install — save-dev webpack-bundle-analyzer. 

    Next, locate the webpack.config.js file within your project and add this to the plugins property. 

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    
    module.exports = {
       plugins: [
          new BundleAnalyzerPlugin()
       ]
    }
    

    After this is added, build your project and when it is finished you will see a rendered page load up in your browser.

    If you are using Vue CLI with a Vue application, the Vue CLI already has a build configuration packaged with the webpack-bundle-analyzer. Just run vue-cli-service build –report and it will generate a report.html file within your /dist folder.

    Report Detail

    In the report, you should notice three levels of bundle sizes.

    • Stat – Obtained from webpack’s stats object, the “input” size of your files, before any transformations like minification.
    • Parsed – This is the “output” size of your files including minification and any other plugins that are augmenting the output files.
    • Gzipped – The size of your bundles after running them through gzip compression.

    Check out the official npm page for the “webpack-bundle-analyzer” to see all of the options and properties you could use to get more information about your bundles.