search

imarc / boilerplate

Responsive CSS, HTML and JavaScript front-end starting point, plus components!
https://imarc-boilerplate.netlify.app/
8 stars 10 forks source link

Is Treeshaking working well or should we look at extensions? #16

Open khamer opened 4 years ago

khamer commented 4 years ago

I know there's supposed to be some treeshaking builtin, but I'd just want to check on it. Maybe worth trying to setup purgecss as well. There's also cleancss - but I'm not sure if we need that so much.

TristanMNorton commented 4 years ago

@khamer Down to try to tackle this if you're coo' with dat.

khamer commented 4 years ago

Sure! I'm less concerned with treeshaking our written code and more concerned with treeshaking dependencies, but both is fine. The example I had in mind was making sure we're not importing (sometimes multiple copies of) all the fontawesome classes; we usually only use a handful, it'd be awesome if treeshaking was filtering some of those out, or we at least knew if that was possible.

Same with JavaScript, but I'm more skeptical of Laravel Mix handling JS well than CSS.

TristanMNorton commented 4 years ago

@khamer https://github.com/imarc/boilerplate-components/tree/update/build-step-optimizations

I've implemented purgeCss with some ease. Granted, I configured this to only scan twig files in the styles directories but I see about a 10kb difference in the outputted css file. (40kb -> 30kb).

I'd be curious to see output size differences with padstone where bootstrap is being imported and the like.

I'll abstain from making a PR just yet as I want to see what can be done about JS. Not confident though as everything I've been reading is that javascript being included needs to more or less be built to allow tree shaking at which point mix will know what to do. I'll keep digging though.