How to Reduce Your Vue.js Bundle Size with Webpack

Jennifer Bland explains how to halve a Vue.js production bundle from 2.48 MB to 1.28 MB by using webpack-bundle-analyzer and applying targeted optimizations such as removing unused libraries, importing only needed lodash functions, aliasing moment, and configuring vuetify-loader to include only required components.

Vue.jsbundle optimizationlodash

0 likes · 9 min read

How to Reduce Your Vue.js Bundle Size with Webpack

Tencent Music Tech Team

Jun 8, 2018 · Frontend Development

Optimizing Vue/Vuetify Projects with Webpack: Code Splitting, CommonsChunkPlugin, and Externals

By using Webpack’s CommonsChunkPlugin to extract node_modules into a vendor chunk, configuring externals to load Vue and Vuetify from a CDN, and converting non‑critical components to async imports, a Vuetify‑based app reduces its first‑screen bundle by hundreds of kilobytes, improves caching, and speeds initial load.

Code SplittingVueperformance optimization

0 likes · 11 min read

Optimizing Vue/Vuetify Projects with Webpack: Code Splitting, CommonsChunkPlugin, and Externals

QQ Music Frontend Team

Apr 7, 2018 · Frontend Development

Master Webpack Code Splitting to Speed Up Vue Applications

This article explains how to improve front‑end performance by separating business code from libraries, using on‑demand async loading, configuring CommonsChunkPlugin, externalizing large dependencies, and applying HTTP/2 optimizations, all demonstrated with a real Vue/Vuetify project.

Code SplittingVueperformance

0 likes · 11 min read

Master Webpack Code Splitting to Speed Up Vue Applications