New to WIP?
We're a group of makers shipping together. We help each other stay accountable and reach our goals.
Apply for access
Topics
Other questions
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!
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!
👋 Join WIP to participate
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
Do you use webpack as well? I use purgecss it just doesn't work.
I'll keep trying tho.
Yes I use webpack. Can you share your config? I might be able to help by seeing your configurration.
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.
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.
did you check the page at localhost:8080? the "damn son" text should be pink, if it's not, then it's not working.
please have a look here, I deployed your "project" after building it.
wizardly-clarke-b9d99e.netlif…
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}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.....
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.