Webpack Academy #5: Optimise your bundle size with minimize, chunk file & hashed
Tags: webpack, javascript, webdev
Published: 2021-09-02 08:44:18

From the last post, we use **cdn** to decrease bundle size when we add big libraries in our app !

Today we will continue to optimize our project with some little tips !

### minimize

The `minimize` options are easy to understand, for the machine that will execute our code, the name of variable, the space between code is useless, we can compress all of our code in one line and short our variable name and the machine will be able to execute it !

This is what `minimize` does !

It will compress your code and compress it in one line !

For prod mode, we want to use this ! Unlike dev mode (see in the next academy for this part 😉)

Before using it, the bundle source code (size: 7KB)👇

![Screenshot 2021-08-26 at 20.00.34](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i39or0ff4p4rryi3aws4.png)

Any human can read this code !

But if we use `minimize` 👇

![Screenshot 2021-08-26 at 20.00.08](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxm1doehld6vy39dr856.png)

And we got **3KB !!**

### Chunk file

*Context: Imagine that your web app is split into 2 big parts*

The first part is the list of products, and the other is a page that shows our products bought in 3D.

Some visitor will not buy any product, but all of 3D model is loaded since the app is in only one bundle.

We should only load the 3D part when users select our product !

For making this, we need to split our app into a `chunk` file !

A chunk file is a file loaded only when we need it.

To make this we need to use a special import !

Let's take a simple example, we want to load a `big json file` when the user clicks on button !

```js
const jsonObjectImport = async () => import(/* webpackChunkName: "myChunkName" */ "./big-object.json")
```
The import is now a promise so we need to get the json value thanks to consuming this promise 👇

```js
document.getElementById("button").addEventListener("click", function() {
    jsonObjectImport().then(jsonObject => console.log(jsonObject.default))
})
```
The json file will be loaded only if the user clicks on button, so when we build this, we have two bundles, the original `bundle` and the `chunk bundle` named `myChunkName` !

When we load the HTML we didn't load the chunk bundle at start !

![Screenshot 2021-08-26 at 20.36.00](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4nyuv0bu46i8ppcktil.png)
 
But if you click on the button 🔥

![Screenshot 2021-08-26 at 20.39.24](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yrbrj3s66o15loz67yo.png)
 

Yes, the **chunk file is loaded** and we get the json object !

Very interesting, we split our application ! When you have some big part of your app, don't hesitate to chunk it !

It's called `lazy loading`, it's like a big image gallery, we load only the image that the user can see, since it cannot scroll, so why load every image!

### Hash file

The last tips to optimize our app ! Keep strong & focus 💪

When we use chunk files, we can have for example 10 parts of our application, and you deploy your application for the first time, the user will load the app and keep all chunks in a cache.

If you release a new version, but you only change one chunk file, you deploy the new version, and the user will re-download all chunks even if only one changed.

You can change this behavior with the `hash` file.

In config file 👇

```js
filename: "[contenthash:8].js"
```
 Change bundle name with `[contenthash:8]`, it will generate a new hash name for our bundle and all chunks !

But what is the purpose ? 🤔

When you will change **one hash chunk file**, and you will release a new version, the user will **only** re-download the new `hash chunk file !` 🎉

I hope you like this article, in the next article we will check together how to set up a dev environment with webpack !

[You can check the source code at this commit](https://github.com/Code-Oz/webpack-academy/tree/117c688935c144abb69a9527e2967fad8be9f486)

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!