Asked

Your approach to maximise frontend performance?

Hey guys,

I'm curious about how do you make sure your frontend code performs well? I mean, in terms of file sizes after build (js, css, html), or other practices.

I come from backend background, I'm pretty comfortable with frontend dev these days, thanks to you guys' suggestions & advices (https://wip.chat/questions/how-do-you-work-with-css).

However, my personal experience is, I still can't minimise the css file successfully, no matter what I try. I'm delivering big files to the frontend (size > 600kb).

I use tailwind css, I followed the instructions, and tried some other approaches to use purgecss to minimise file size, And when the file is minimised, it just doesn't work. I've spent days trying to figure it out, it's getting frustrating now.

I've published the boilerplate I created for myself to use to spin up new project quickly, would someone kindly have a look? Or share your practices? It would be really helpful! Thanks a lot!

The Creator.
Dad & Full Stack Engineer - Working on https://nomadbond.com & https://emlakim.com

I'm using tailwind too, and was struggling with the same (file size). I'd suggest looking into purge-css, this will scale the size of your output. I managed to go from ~800Kb to ~12Kb

The Creator.

Do you use webpack as well? I use purgecss it just doesn't work.

I'll keep trying tho.

Dad & Full Stack Engineer - Working on https://nomadbond.com & https://emlakim.com

Yes I use webpack. Can you share your config? I might be able to help by seeing your configurration.

The Creator.

I forgot to add it here, I did post it: github.com/adamleo/css-minimi…

Really appreciate it, mate!

Spent another day today trying to figure it out, still not working.

Dad & Full Stack Engineer - Working on https://nomadbond.com & https://emlakim.com

I'm not sure why it's not working for you. I cloned your repo and when I run "yarn build" you have a css file of 564 bytes.. with tailwind classes being purged correctly.

".text-red-500{color:#f56565}.text-6xl{font-size:4rem}" those two classes are the only ones which are left in the vendor.css file.

The Creator.

did you check the page at localhost:8080? the "damn son" text should be pink, if it's not, then it's not working.

Dad & Full Stack Engineer - Working on https://nomadbond.com & https://emlakim.com

please have a look here, I deployed your "project" after building it.

wizardly-clarke-b9d99e.netlif…

The Creator.

you didn't change anything? this is crazy, I just built it again and this is what's in my vendor.css file: /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}

The Creator.

how even.... I seriously don't understand.... hope it didn't waste too much of your time man, really appreciate you helping @erhankaradeniz . Maybe I need to check my other configs.....

Dad & Full Stack Engineer - Working on https://nomadbond.com & https://emlakim.com

have you tried removing your node_modules folder and re-installing all packages.. I don't know if you use npm or yarn, but I had issues with npm before and switched to yarn..

And you're welcome, hope the re-install solves your issue.