How to Reduce Your Vue.js Bundle Size with Webpack

In this article, Google developer advocate Jennifer Bland shares practical techniques for cutting the size of a Vue.js production bundle, which originally exceeded the recommended 244 KiB limit and triggered multiple asset‑size warnings.

She first installs webpack-bundle-analyzer to visualize which dependencies dominate the bundle:

npm install --save-dev webpack-bundle-analyzer

Then she adds the analyzer plugin to vue.config.js :

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

The analysis reveals four major culprits: vue-echarts , vuetify , moment , and lodash . The following sections describe how each is trimmed.

Reducing lodash

lodash accounts for ~70 KB, but only two functions ( cloneDeep and sortBy ) are used. The solution is to remove the vue-lodash wrapper and import only the needed functions from lodash/core :

import { cloneDeep, sortBy } from 'lodash/core';

This change drops the bundle from 2.48 MB to 2.42 MB.

Reducing moment.js

moment.js contributes ~234 KB, mostly due to bundled locale data. The import is changed to load only the core source:

import moment from 'moment/src/moment';

Because many files still import moment , a webpack alias is added to redirect those imports to the trimmed source, and webpack.IgnorePlugin is used to suppress missing locale errors:

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

After these changes the bundle shrinks to 2.22 MB and locales are no longer loaded.

Reducing Vuetify

Vuetify alone occupies ~500 KB. By upgrading to the latest version, installing vuetify-loader , and configuring it to import components on demand, the size is dramatically reduced. The necessary plugins and style loaders are added:

npm install vuetify vuetify-loader stylus stylus-loader style-loader css-loader --save

The vue.config.js is updated to use the loader and a custom theme, and imports are switched from vuetify to vuetify/lib . After rebuilding, the bundle reaches roughly 2 MB.

Reducing vue-echarts

Updating echarts and vue-echarts to the latest versions and importing the component directly from its source path further cuts size:

import ECharts from 'vue-echarts/components/ECharts.vue';

The final bundle size after all optimizations is 1.28 MB, almost a 50 % reduction.

Jennifer concludes that developers should routinely run webpack-bundle-analyzer , identify heavyweight dependencies, and apply targeted reductions to keep production Vue applications lean.