One accidental line in LESS file added nearly a MB to our app.bundle.js code, and how I caught it.

I was randomly taking a look at our webpack stats visualizations and I saw something that really caught my eye. For one, our app.bundle.js code had jumped quite a bit in size. Then when I started digging into it, it was clear somethign went terribly wrong.

I had an 881.9k top-bar.less file.
TopBarLessVisualized

I am familiar with that component and knew there wasn't a lot of custom UI going on, so I took a look at the file and here's what I found.

@import "../../app.less";

.limiter-top-bar{
  .panel-body{
    overflow: scroll;
  }
}

Does that look like 881.9k to you? No! But that line 1 certainly is concerning. It is essentially re-including the entire LESS library, which includes bootstrap css, which includes fonts, and so on. I removed this line and tested to make sure that it didn't break anything. Then I rebuilt our app and re-visualized it. It looks like this one line change shaved roughly 800kb off of the entire compiled library for this particular app. WOWZAS!
LibraryAfterFix


Corey Snyder

Corey Snyder

Senior Front-End Engineer for Aver Inc.. I have independently developed & released multiple video-games. I play Ice Hockey, I race FPV Drones, and I love my Subaru WRX STI.

Read More