How to Reduce Your Vue Bundle Size With Webpack
summary
Uses webpack-bundle-analyzer to inspect an enormous build and then applies concrete fixes: switch to import individual lodash methods (bundle drops 2.48 → 2.42 MB), add a moment locales alias to avoid shipping locales (→ 2.28 MB), enable the beautify loader / plugin to only pull used Vuetify bits (→ 2.0 MB), and swap to the minified vue-echarts import (→ 1.28 MB), cutting the bundle roughly in half.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 0:50Application tour
- 1:41Problems
- 2:04What is causing the large bundle size?
- 3:07Reduce size of Lodash
- 3:46Reduce size of Moment
- 5:06Reduce size of Vuetify
- 6:27Reduce size of vue-echarts
related talks
45mDark Art of Webpack Bundle Tuning
07mThe Lazy Way to Better Performance
52m10KB or Bust: The Delicate Power of Webpack and Babel
30mWebpack – The React Parts
31mDark Art of Webpack Bundle Tuning
29mManaging Complexity in Vue CLI
58m10KB or Bust: The Delicate Power of Webpack and Babel
28mDecoding JavaScript: Loading Performance —