Possible ways to reduce your webpack bundle size

Original image source : https://images.ctfassets.net/nj2caiz7hkjw/3VoFdDTP5SowwESKIOAgm/a111ddd784928b61045c8e811e1769be/webpack.png

According to webpack’s official website, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

Webpack can take care of bundling alongside a separate task runner. However, the line between bundler and task runner has become blurred thanks to community developed webpack plugins. Sometimes these plugins are used to perform tasks that are usually done outside of webpack, such as cleaning the build directory or deploying the build.

It’s primarily a module bundler for your JavaScript, but it can be taught to transform all of your front-end assets like HTML, CSS, even images. It can give you more control over the number of HTTP requests your app is making and allows you to use other flavours of those assets (Pug, Sass, and ES8, for example). Webpack also allows you to easily consume packages from npm.

Webpack is an awesome static bundler for your javascript applications but things can get a little messy when the size of your webpack bundle increases, it can drastically slow down the load time of your javascript applications.

Here are some cool ways you can reduce your webpack bundle size:

SCOPE HOISTING

Scope hoisting uses a smarter way to add the modules to the bundle.

what can scope hoisting do:

● Makes the JavaScript execute faster in the browser

● Can reduce the bundle size

How do I do this?

Add this one line in the plugin section of your webpack.config.js file:

 webpack.optimize.ModuleConcatenationPlugin()

Although, it Requires webpack 3 or later.

USE WEBPACK 4 IN PRODUCTION

This is really important because using webpack 4 in production automatically removes all unnecessary white spaces, new lines etc. It can also tell some packages not include debug code.

How do I do this?

create your production bundle like this

webpack -p --mode=production

Things it does:

● Enables minification with UglifyJS

● Sets NODE_ENV to production

USE LODASH-WEBPACK-PLUGIN

If you are using lodash in your javascript project, you might want to check out lodash-webpack-plugin. It removes lodash features you don’t use. This will significantly reduce your bundle size.

How do I do this?

Install the dependency from npm with the command

npm install lodash-webpack-plugin -save--dev

And require the module at the top of your webpack.config.js:

 LodashModuleReplacementPlugin = require(’lodash-webpack-plugin’);

add this line in your webpack.config.js in the plugin section

new LodashModuleReplacementPlugin

USE A BUNDLE ANALYZER TOOL

The bundle generated by webpack cannot be read by humans. But with a bundle analyzer humans can visualize the output bundle files in an interactive treemap.

How do I do this?

There are many webpack bundle analysis tools. In my opinion, these two are the best:

● https://github.com/th0r/webpack-bundle-analyzer

● https://github.com/danvk/source-map-explorer

TREE SHAKING

Tree shaking is the process of removing dead code from your bundle. Dead code is code that is exported without being imported anywhere.

How do I do this?

1) Use ES6 module syntax

Make sure you use ES6 modules and import by module name as much as possible. Like this:

import { connect } from ”react-redux”;

Instead of:

 import reactRedux from ”react-redux”;

2) Update .babel.rc

Add modules: false to your babel config (usually in . babel.rc).

If you are using es2015 preset, it should look like this:

presets: [[”es2015", { ”modules”: false }] ]

If you are using babel-preset-env, then it should look like this:

presets: [[”env”, { ”modules”: false }] ]

3) Make sure you are using webpack 2 or later

CODE SPLITTING

With webpack you can split your bundle up into many smaller ones and only load the bundles needed by each page. You can even load the bundle asynchronously!

For example, if you have a modal, then you can carry out code splitting by loading code for that modal only when the user clicks on the button that would open the modal. This would increase load time because you would have not loaded any of the modal code on the initial page load

How do I do this?

Read more about how code splitting works:

● Code-splitting