How to Increase Your Page Size by 1,500% with Webpack and Vue

#1

Post by Zweihander » Wed, Jun 19, 2019, 8:32 PM UTC

How to Increase Your Page Size by 1,500% with Webpack and Vue
css-tricks.com

Re: How to Increase Your Page Size by 1,500% with Webpack and Vue

#2

Post by lozenge » Wed, Jun 19, 2019, 11:03 PM UTC

Cute article.

Re: How to Increase Your Page Size by 1,500% with Webpack and Vue

#3

Post by sparrish » Wed, Jun 19, 2019, 11:08 PM UTC

My favorite quote from the article:

"As a side note, the next time you think about refactoring something, don’t. Just leave it alone. If you don’t leave any technical debt for the next generation, they’re going to be extremely bored and that’s going to be on you."

Re: How to Increase Your Page Size by 1,500% with Webpack and Vue

#4

Post by baybal2 » Wed, Jun 19, 2019, 11:50 PM UTC

I like Vue, but I don't like aggressive webpack+babel pushing.

What's the use of a module loading/splitting script that ends up with net increase of your bundle over non compresses/pruned JS every time?

Re: How to Increase Your Page Size by 1,500% with Webpack and Vue

#5

Post by samspenc » Thu, Jun 20, 2019, 1:15 AM UTC

TL;DR (hopefully I'm getting this right): the issue was that Vue.js creates scoped styles, and because the Sass styles were imported into every VueJS component, it rendered (and duplicated) the CSS in every component at runtime.