Reduce Webpack Bundle Size in Vue

Learn how to analyze webpack bundle and reduce bundle size in Vue

Sanketkumar Karve

3 minute read

I have been working on my new Vue application and It was working great until I build my application with command npm run build . I was unhappy with the build size as overall size is 8MB and initial load is 800Kb. It seem to much too me and want to reduce the bundle size by removing unnecessary packages.

Build-size


Let’s check how we can analyze the issue.

1. Analyze webpack bundle

Webpack Bundle Analyzer is a very good tool create an interactive treemap visualization of the contents of all bundles.

Let’s start with installing the Webpack Bundle Analyzer using command :

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

Now configuring the webpack.config.js file.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}


Now you are all set with Webpack Bundle Analyzer and can run the development server using command npm run dev
Webpack Bundle Analyzer automatically run a local server with different port and interactive treemap is been displayed on your browser with your all bundles you have used in the application. As you hover over the block it display the size consumed by the bundle.
In my case the most of the size was consumed by lodash.js(526.95KB) and moment.js(476.23KB) in node_modules block.

Build-size

2. Reduce unnecessary bundle usage

reduce lodash.js size

On researching, I understand I have been loading the entire package of lodash.js package and most of the part us unused.

So, import only core part lodash.

import { get } from 'lodash/core';

Now I know that I have to import only the core part from lodash but if any other developer is working on same application, chances are that he will again import the entire lodash package again. A good practice is to make an alias for lodash.

In webpack.config.js file, let’s create a alias :

module.exports = {
  resolve: {
    alias: {
      'lodash': 'lodash/core',
    },
  },
}

now you can again change the import line in your code to :

import { get } from 'lodash';

Build-size

As you can check in Webpack Bundle Analyzer the size of lodash.js is reduce significantly and most importantly it did not have any impact on my application.

reduce moment.js size

Moment.js is great library for Parse, validate, manipulate, and display dates and times in JavaScript. Similarly to lodash.js, moment.js is importing the entire package. As I don’t require the locale, I have imported only the src/moment.

Let’s make a alias for moment.js in webpack.config.js file.

module.exports = {
  resolve: {
    alias: {
      'lodash': 'lodash/core',
      'moment': 'moment/src/moment',
    },
  },
}

Now import the moment.js in your code using the syntax :

import moment from 'moment';

Let check the Webpack Bundle Analyzer for moment.js size. Build-size

Let’s run npm run build to check the total size of the application.
Build-size-finial

comments powered by Disqus