mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-12 02:42:48 +00:00
Code Issues Releases Wiki Activity

new post

Browse Source
This commit is contained in:
mgerb42
2016-10-28 16:48:21 +02:00
parent 829b7e6248
commit 6848ddadd0
6 changed files with 337 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
posts/minimize-js-bundle.md Normal file
View File

@@ -0,0 +1,11 @@
# Minimizing JS bundle size with Webpack
I haven't been paying much attention to the bundle size of my JS files until recently I discovered it was almost 1mb (after minification)! Even after gzip the bundle was over 300kb. Although this site doesn't get much traffic this was unacceptable in my eyes.
## Why was it so big?
I had no idea why my bundle size was so huge because I wasn't using an large libraries or anything. I needed something like a profiler, or a way to analyze each mondule being loaded because I had no idea where to start.
## Webpack visualizer plugin
I came across this plugin and it is what saved me. I shows an interactive graph of each module being loaded along with sub modules. It was just what I needed! To my surprise, highlight.js was taking up almost 600kb (keep in mind webpack visualizer shows sizes before minification)