Drupal's library definitions support specifying an aggregate target via css_aggregate_target and js_aggregate_target.
When a library contains multiple files, it can be more efficient to serve a single aggregate for that library instead of combining it with other libraries. This improves CDN and browser cache hit rates when different combinations of libraries are attached on different pages, because the per-library aggregates are always the same across pages.
There are two ways to use this:
For a library with large or several files that is likely to be shown on every page, set css_aggregate_target: true see this example from Olivero:
global-styling:
css_aggregate_target: true
version: VERSION
css:
base:
For libraries that are always attached together due to dependencies, an arbitrary string can be provide to allow libraries to target the same aggregate.
drupal:
js_aggregate_target: 'drupal'
version: VERSION
js:
misc/drupal.js: { weight: -18 }
@@ -362,6 +363,7 @@ drupal:
suppressDeprecationErrors: true
drupalSettings:
js_aggregate_target: 'drupal'
version: VERSION
js:
Note that when individual file weights or similar issues cause libraries to be 'split' across multiple aggregates, the aggregate target will be ignored to preserve correct ordering. It's highly recommended to manually test the number of aggregate files per page on multiple different pages when implementing this feature.