library_renderer

The library renderer provides component and DOM level rendering of libraries.

Using component or DOM level rendering will increase page speed by only attaching libraries as and when required.

Features

The module provides four options for attaching a library:

1. html_tags: Attaches a library when HTML output contains a matching DOM element.
2. templates: Attaches a library when an exact match template.html.twig file is found.
3. theme_hooks: Attaches a library when a theme hook is invoked.
4. theme_suggestions: Provides fuzzy template matching against template suggestions.

These options provide fine-grained control over how and when libraries are rendered. When combined with component-level CSS and JS files, page load speed is enhanced and you will achieve better results in tools like Page Speed Insights whilst enhancing user experience and reducing bandwidth.

Post-Installation

Once the module is installed you can upgrade your libraries.yml file by using the following example as a template:

example_library:
  css:
    component:
      theme/dist/example.css: { minified: true }
  js:
    theme/dist/example.js: { minified: true }
  dependencies:
    - core/jquery
  library_renderer:
    html_tags:
      pre: { }
      code: { attributes: { class: 'language-php' } }
    templates:
      - field.html.twig
      - foo.html.twig
    theme_hooks:
      - input__submit
      - block
    theme_suggestions:
      - field__paragraph__example
      - field__foo

Note: the module allows combinations of renderers but please pay special attention to formatting YML files as it is prone to error.