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
CSS optimization
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
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
-
- Posts: 1
- Joined: 09 Jun 2017, 21:37
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.
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
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
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Information
-
Who is online
Users browsing this forum: No registered users and 3 guests