Libraries, Assets, and Bundling

Drupal has a system for asset library dependencies.

Libraries

Modules and themes use *.libraries.yml to define assets.

CSS is added in a SMACSS layer, to determine the ordering among all libraries on the page.

This is important to get styles working correctly in the CSS cascade.

JS and CSS both use weights to fine tune the ordering.

Library dependencies also impact the load order.

When one library declares a dependency on another, it is simply loaded ahead of time to ensure it is available on the page for a script to run, or so that base styles don't override components and theme styles.

If two modules use the same dependency, this works fine.

The trouble comes in when they require different versions, or if one includes the .min.js version, and the other expect a library installed in the libraries directory.

This will cause both versions to be loaded.

You would have to implement a library override and pick one over the other.

Asset Packagist

Asset Packagist has become the best way to install shared libraries. 

Modules can provide instructions or a composer.json file to include them automatically.

All modules and themes that share a library would have to use the asset packagist version.

There is also the Libraries module: https://www.drupal.org/project/libraries

It is unclear to me what role this plays now.

Assets

Assets include js, css, plus fonts, images, icons and more.

There is a new way to reference assets in drupal, with an assets:// stream wrapper.

https://www.drupal.org/node/3328126

This is more for using assets stored externally, like in an s3 bucket.

Bundling

Bundling comes from the javascript ecosystem.

A modern script imports npm packages, which can also have imports, creating a complex chain of dependencies.

Bundling copies the dependent code into one or several files, depending on configuration.

This shrinks the file size better than traditional minifying, stripping it down to just the code that is needed (or specified to be included).

This is shaking up the Drupal ecosystem.

Here is a new initiative to leverage bundling in Drupal: https://www.drupal.org/about/core/blog/new-community-initiative-frontend-bundler

Here is an issue for adding importmap support to Drupal: https://www.drupal.org/project/drupal/issues/3398525

(Importmaps are tangental to bundling, providing a way to reference packages that map to their actual location).

Foxy is a PHP package that aggregates package.json files to bundle assets in the project root.

https://www.drupal.org/project/foxy

Foxy and Vite are the leading tools in the initiative.

It is still unclear how this will all come together.