Possible ways to reduce your webpack bundle size | JS SECRETS
Tags: javascript
Published: 2019-04-24 18:32:10

---
title: Possible ways to reduce your webpack bundle size | JS SECRETS
published: True
tags: javascript
canonical_url: 
---

![Promotional Image](https://cdn-images-1.medium.com/proxy/1*mMApZzre4jYR5owWyF8Vug.jpeg)

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

According to [webpack’s official website](https://webpack.js.org/concepts), webpack is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a [dependency graph](https://webpack.js.org/concepts/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/th0r/webpack-bundle-analyzer)

● [https://github.com/danvk/source-map-explorer](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](https://webpack.js.org/guides/code-splitting/)

### References

● [https://survivejs.com/webpack/what-is-webpack/](https://survivejs.com/webpack/what-is-webpack/)  
 ● [https://www.sitepoint.com/beginners-guide-webpack-module-bundling/](https://www.sitepoint.com/beginners-guide-webpack-module-bundling/)  
 ● [https://webpack.js.org/concepts](https://webpack.js.org/concepts)

_Originally published at_ [_sheddynathan.me_](https://sheddynathan.me/ways-to-reduce-your-webpack-bundle-size/)_._