Replies: 4 comments
-
While I agree with all the performance improvements, my question would be how it could be implemented? All of the improvements mentioned REQUIRE external tools (nothing that would be part of this library). In this case, it seems that what is needed is better support/integration with such tools, but what would that mean? Just my initial impression. |
Beta Was this translation helpful? Give feedback.
-
Emm, I'm afraid that PurgeCSS can lead to problems that is hard to test and find. Anything changed - and you will stuck with problem just because you want to save few KBs. Even if you provide just a blog with clean content, you always put some beautiful image before it. And it will override all benefits that you get from hard-work-purging Buefy. Heck, before article about PurgeCSS is PNG image with size 167KB! Yes, maybe some heavier Frontend libs should be purged, but I, for example, choose Bulma and Buefy because it's beautiful, elegant and small, really small - and I don't need to think about few Kilos that user will download only once. |
Beta Was this translation helpful? Give feedback.
-
Like, you see, maybe we should start with purging images (or just using JPG)? |
Beta Was this translation helpful? Give feedback.
-
You can check the work being done by @phatj on #1822 and contribute in some way 🙂
Well, images are essential content and we have a lot of tools to optimize them on-demand. Having thousands of line codes that are not being used is not essential. If there's space to improve and not deliver those line codes then we should take a look into it. If you run a big business you will pay a lot for those few Kilos in a lot of ways. |
Beta Was this translation helpful? Give feedback.
-
The following issue I’m about to explain is with the desire of the community to bring his knowledge to improve Bulma/Buefy performance.
Personally, I love Bulma syntax and the amazing work of Buefy. However, Bulma is constantly growing in features and consequently in size. The full CSS of Bulma is 390kb and even just importing the .scss that I usually need is 168kb, and that contains so many code that I don’t actually use.
There are 3 approaches that I think can bring good optimizations that I want to discuss with the community and make the adjustments and guides required for everyone to use and adapt.
PurgeCSS (#1822)
It removes unused selectors from your CSS, resulting in smaller CSS files. It can bring around a 90% reduction. In TailwindCSS it brings down from 370kb to around 4kb.
There is good research here about Buefy and PurgeCSS: https://medium.com/@collinslagat/hack-dealing-with-purgecss-deleting-css-classes-from-vue-component-libraries-element-ui-vuetify-955bbe3f8add
Local Ident
Long-and-readable class names make CSS source code become too bucky and Bulma has readable class names which makes it even heavier. In production, readable CSS class names are unneeded. This approach can bring a 70% reduction, for example, in a dummy project the CSS reduced from 220KB (8-length hashed class name by vue-loader cssmodule + Bootstrap 4) to 85KB.
I haven’t found a way to make use of this but here is good research: https://medium.com/@my_own_grave/reducing-css-generated-by-vue-loader-by-using-classnames-shorten-trick-aa1d25d77473
Media Query Splitting
It splits styles from style chunks by media query and creates separate CSS files for mobile, tablet and desktop. This way if you’re loading a website on desktop you’re not loading mobile/tablet media queries. Also, it handles the loading of these files depending on the client's screen width, it happens on loading a new chunk or on window resize.
Here is a GitHub repo: https://github.com/mike-diamond/media-query-splitting-plugin
Why Buefy need this feature
In these last years has been an increased focus and concern on performance. Tailwind, due to its nature, can bring a huge improvement in speed, however, some of us don’t like utility-first CSS frameworks.
I believe we can bring great good improvements to speed. This is why I’m creating this issue on GitHub, so people with more knowledge than me can bring their motivation and expertise so we can make the adjustments and guides necessary that everyone can take advantage of.
Thank you everyone!
Beta Was this translation helpful? Give feedback.
All reactions