Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minify production CSS via cssnano #713

Merged
merged 1 commit into from Oct 25, 2022
Merged

Minify production CSS via cssnano #713

merged 1 commit into from Oct 25, 2022

Conversation

andrewmcodes
Copy link
Contributor

@andrewmcodes andrewmcodes commented Oct 25, 2022

Use Tailwind's recommended method of minifying the CSS via the cssnano PostCSS plugin. This drops the final CSS files by about 20kb when NODE_ENV is production.

You can test this yourself by pulling this branch, installing deps, and running

yarn build:redesign
yarn build:css

Take note of the final file sizes generated to app/assets/builds and then run the commands again with NODE_ENV=production prefixed to see the savings 🔥

NODE_ENV=production yarn build:redesign
NODE_ENV=production yarn build:css

Here is what I am getting on my machine after multiple runs:

File pre-cssnano post-cssnano
application.tailwind.css 88kb 67kb
redesign.tailwind.css 83kb 63kb

Warning
I have never (yet) seen this mess up any of the final styles and I did a spot-check around the app and didn't see anything but with any minifying - it comes with risks. I am using the default settings and the docs promise these are safe transforms only

Since you're working on a redesign, I figured this would be the perfect time to introduce this optimization from which you get a pretty significant saving (see above).

Didn't think this needed a changelog entry but lmk and I can add. Feel free to throw this away but I noticed you didn't have it and wanted to get in a contribution 😄

Pull request checklist

  • My code contains tests covering the code I modified
  • I linted and tested the project with bin/check
  • I added significant changes and product updates to the changelog

Use Tailwind's recommended method of minifying the CSS via the `cssnano` PostCSS plugin. This drops the final CSS files by about 20kb when `NODE_ENV` is production.
@joemasilotti
Copy link
Owner

20kb?! That's like ¼ reduction in size! Thanks so much for this Andrew.

Once CI passes I'm going to do a quick review locally and merge it in if all looks good.

@joemasilotti joemasilotti merged commit 638f660 into joemasilotti:main Oct 25, 2022
5 checks passed
@andrewmcodes andrewmcodes deleted the perf-minify-css branch October 26, 2022 03:28
@andrewmcodes
Copy link
Contributor Author

It's Free Real Estate

benmercerdev added a commit to benmercerdev/railsdevs.com that referenced this pull request Oct 28, 2022
* main: (31 commits)
  Github Actions changes (joemasilotti#717)
  represent json string with multine string syntax (joemasilotti#716)
  build: minify CSS via cssnano (joemasilotti#713)
  Set request variant for redesign requests (joemasilotti#714)
  Paywall location and timezone filters (joemasilotti#674)
  Fix tailwind postcss setup (joemasilotti#710)
  New fonts for the redesign (joemasilotti#708)
  Don't track `/developers/:id/:code` to Fathom (joemasilotti#706)
  Refactor `Users::PaywalledComponent` to remove business logic (joemasilotti#705)
  Tell Heroku to build the redesign CSS, too (joemasilotti#704)
  Multiple Tailwind CSS configs (for the redesign) (joemasilotti#701)
  Update to Tailwind CSS v3.2 (joemasilotti#700)
  Publicly shareable developer profile URLs (joemasilotti#665)
  Bump nokogiri from 1.13.8 to 1.13.9 (joemasilotti#697)
  Bump Turbo Package to 7.2.2 & Gem version to 1.3.1 (joemasilotti#696)
  Compress HTML output via gzip (joemasilotti#688)
  Bring back 1x and 2x avatars and remove lazy loading (joemasilotti#680)
  Fix test settings for Rubymine (joemasilotti#679)
  RailsDevs French Version (joemasilotti#687)
  Revert manual payments (joemasilotti#681)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants