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)👇
Any human can read this code !
But if we use minimize 👇
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 !
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 👇
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 !
But if you click on the button 🔥
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 👇
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
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 and MP me 😁
Or get it HERE
☕️ You can SUPPORT MY WORKS 🙏
🏃♂️ You can follow me on 👇
🕊 Twitter : https://twitter.com/code__oz
👨💻 Github: https://github.com/Code-Oz
And you can mark 🔖 this article!
Latest comments (0)