Separate dist files for components

[Nicoloye]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Hello everybody!

I searched for duplicate and didn't found any but I may have used terms that are too generic, sorry if I'm pushing something that has been openly discussed elsewhere.

I'm wondering if the different component asset files (css and js) could be generated as separate dist files.
Being part of the Drupal community I see many projects that are recompiling those separately to allow an optimized aggregation of the css and js files. Here are some examples:

• https://git.drupalcode.org/project/bootstrap/-/tree/5.0.x/components/accordion?ref_type=heads
• https://git.drupalcode.org/project/bootstrap_barrio/-/tree/5.5.x/components/accordion?ref_type=heads
• https://git.drupalcode.org/project/bootstrap5/-/tree/4.0.x/css/components?ref_type=heads

Motivation and context

Many CMSs or frameworks often have a process that aggregate CSS/JS files to be sure to ship only assets that are in use on a page rather than loading all components even if you don't use most/many of them.

As a company we have more and more clients that are asking us to ensure a certain ecoIndex score or similar ecodesign scores that check how efficiently the assets are loaded and used. Having them separately would greatly help in aggregation processes to optimize scores on such tools.

[julien-deramond]

Thanks for the suggestion @Nicoloye!

While Bootstrap doesn’t provide per-component CSS files in the dist/ folder, you can already achieve this level of control using the Sass source files. By importing only the components you need into your custom Sass entry file, you can compile a slimmed-down CSS build. You can also combine this with tools like PurgeCSS to remove unused styles at build time for even better optimization.

On the JS side, Bootstrap 5+ supports ES module imports for each component, so you can include only the JavaScript you actually use. This modular approach gives you full control over what gets bundled, making it easier to meet performance or eco-design goals without having to recompile the entire framework.