CSS optimization

UI Components for React
Post Reply
majlor
Posts: 4
Joined: 18 Aug 2021, 16:25

18 Aug 2021, 16:34

Hi,
In the latest version of primereact has each component his own css file with minimal styles definition.
In your documentation are still css import used with whole primereact.min.css,

But what about style spliting? It is possible to use Button for example, only with importing of button.css file from his folder? Without importing large and unnecessary whole global styles and theme?

I would like to import things only necessary for components which I am really using.

How can I do that?
Thank you for answer

mcandu
Posts: 107
Joined: 20 Jan 2021, 16:31

19 Aug 2021, 14:17

Hi,

There is no way to do it for now. But it makes sense. I'll talk to team about this and get back to you.
Thank you for your feedback.

Best Regards,

majlor
Posts: 4
Joined: 18 Aug 2021, 16:25

26 Aug 2021, 09:13

Hi,

Are there any news about this topic ?
It could be great to have this feature.

THX

majlor
Posts: 4
Joined: 18 Aug 2021, 16:25

26 Aug 2021, 14:46

HI,

I was checking the content of CSS files. There is duplicate content. It is absolutely possible to do that. There is absolutely NO Braking change to achieve it.
Just create a new file with with GENERAL classes necessary for all components like a .p-disabled, .p-hidden etc, and publish it as core.css file.
Then LET people to chose approach how to compile files together. You can still keep primereact.min.css file as is, for compatibility.
BUT, for dev teams who are using Webpack, Rollup and other tools, let them freedom to use features like a Tree shaking etc., to reduce output bundle size.

Only what developer need in his bundle is Button for example. So I will do this:

Somewhere at the root container:
import 'primereact/core.css'

Then somewhere I need the button:
import {Button} from 'primereact/button'
import 'primreact/button/button.css'


And That`s all,
My bundle size is about 20kb instead of 120 kb in the best way.

Let`s do PrimeReact more flexible and enjoyable for all dev teams !!

Thank you

simonwidjaja
Posts: 1
Joined: 09 Jun 2017, 21:37

11 Jan 2023, 10:41

Where are we on this one? Are there better solutions already? I am facing the exact same problem. I love primereact but in a current project I just want to use a few of components. But the build files are WAY to heavy with all the css that is NOT used. Any hint or solution highly appreciated.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

13 Jan 2023, 00:44

I have a sample PrimeReact project here that uses Create React App and PurgeCSS to thin out the final CSS that I am using in my build. It allows you to filter out anything you are not using in the final build.

Project: https://github.com/melloware/react-security-hardening

See config-overrides.js for example of using PurgeCSS: https://github.com/melloware/react-secu ... js#L29-L37
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests