Vue.js Webpack Analyze Bundle Size

Jan 7, 2018

If you setup Vue.js using webpack template, just run the following command to analyze bundle size.

npm run build --report

The command utilize webpack-bundle-analyzer. Report is accessible at http://127.0.0.1:8888/.

webpack-bundle-analyzer

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.

Tags

Related articles

Setup Bootstrap 4 With Vue Cli 3 Webpack Vue.js Code Splitting With Webpack and Vue Cli 3 Fontawesome 5 Pro Npm and Webpack Guide Webpack Starter Template/Boilerplate to generate Single File Bootstrap js/css Enable Vue.js Webpack Development With Hot Module Reloading (HMR) On External Server Setup PWA With SWPrecacheWebpackPlugin Setup Bootstrap 4 (Beta 3) With Npm And Webpack Vue.js 2.x Development Build With Hot Reloading For External Server (using Webpack template)Install And Setup Webpack Vue.js Webpack Split moment-timezone Into Vendor Bundle Vuejs Webpack Template Split Vendor CSS Vuejs Webpack Template Reduce Output File Hash Length Disable ESLint no-console In Development Disable ESLint Warning for Imports Analyze Webpack Npm Packages File Size Reduce Moment.js Npm File Size For Webpack Webpack: ESLint jQuery $ Is Not Defined Enable Compass For Sass On Vue.js Webpack Template Enable Sass On Vue.js Webpack Template