Reduce Your Bundle Size In 5 Steps 😎

Image for post
Image for post

Why the hell should I care about my bundle size?

Website speed is the first impression you ever make

How can I find out what is my current bundle size?

Image for post
Image for post
webpack bundle analyzer

Ok you convinced me! What should I do?

1. Tree Shaking

Image for post
Image for post
es6 module

2. Reduce Lodash

3. Switch to ‘Preact’

npm i preact react-compat
// in webpack.config.js
...
{
"resolve": {
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
}

4. Remove unused pollyfills

Image for post
Image for post
Import only what you use

5. Use code splitting

Summary

Written by

Full stack developer, love coding and love life ;]

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store