{"id":456,"date":"2021-01-18T12:36:02","date_gmt":"2021-01-18T20:36:02","guid":{"rendered":"https:\/\/www.mavice.com\/blog\/?p=456"},"modified":"2021-03-03T11:45:12","modified_gmt":"2021-03-03T19:45:12","slug":"visualizing-the-size-of-your-vue-react-angular-bundles","status":"publish","type":"post","link":"https:\/\/www.mavice.com\/blog\/visualizing-the-size-of-your-vue-react-angular-bundles\/","title":{"rendered":"Visualizing the Size of your Vue\/React\/Angular Bundles"},"content":{"rendered":"\n

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<\/a>, there are a few ways you can analyze your bundles.<\/p>\n\n\n\n

Analyzing Bundles<\/h2>\n\n\n\n

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. \u201cwebpack-bundle-analyzer<\/strong><\/a>\u201d<\/strong> 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.<\/p>\n\n\n\n

\"\"
webpack-bundle-analyzer rendered page after running \u201cvue-cli-service build\u200a\u2014\u200amode production\u201d<\/figcaption><\/figure>\n\n\n\n

How to use<\/h3>\n\n\n\n

Open a terminal with the path to your application and execute the command npm install\u200a\u2014\u200asave-dev webpack-bundle-analyzer. <\/strong><\/p>\n\n\n\n

Next, locate the webpack.config.js<\/strong> file within your project and add this to the plugins property. <\/p>\n\n\n\n

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nmodule.exports = {\n   plugins: [\n      new BundleAnalyzerPlugin()\n   ]\n}\n<\/code><\/pre>\n\n\n\n
After this is added, build your project and when it is finished you will see a rendered page load up in your browser.<\/p>\n\n\n\n
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.<\/em><\/p>\n\n\n\n
Report Detail<\/h3>\n\n\n\n
In the report, you should notice three levels of bundle sizes.<\/p>\n\n\n\n