1

I have read that Drupal 8 by default loads library-defined files into the footer. My module libraries.yml file makes use of the "header: true" property as several JS files are needed to load in the header. However, now I need to add another JS file to the library, but this new file must load in the footer / just before the closing of the body tag.

How do I modify my libraries.yml file to make this JS file the only footer-loading one?

modulename:
  version: 1.x
  header: TRUE
  js:
    headerfile1.js: {}
    headerfile2.js: {}
    footerfile1.js: {}
  css:
    component:
      css/style.module.css: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal

1 Answer 1

3

Just add it to your *.libraries.yml as an additional library this time without header: TRUE. And maybe better place all your JS files in a subfolder named /js.

headerlibs:
  version: VERSION
  header: TRUE
  js:
    js/headerfile1.js: {}
    js/headerfile2.js: {}
  css:
    component:
      css/style.module.css: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal
    - core/drupalSettings

footerlibs:
  version: VERSION
  js:
    js/footerfile1.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal
    - core/drupalSettings

Then attach everything as usual:

/**
 * Implements hook_page_attachments().
 */
function MYMODULE_page_attachments(array &$attachments) {

  $attachments['#attached']['library'][] = 'MYMODULE/headerlibs';
  $attachments['#attached']['library'][] = 'MYMODULE/footerlibs';
}

From the docs:

Asset loading order

As you would expect, the order in which the files are listed is the order in which they will load. By default, all JS assets are now loaded in the footer. JS for critical UI elements that cannot be shown unless their corresponding JS has run can be loaded in the header if needed like so:

js-header:
  header: true
  js:
    header.js: {}

js-footer:
  js:
    footer.js: {}

Set the header property to true, to indicate that the JavaScript assets in that asset library are in the 'critical path' and should be loaded from the header. Any direct or indirect dependencies of libraries declared in this way will also automatically load from the header, you do not need to declare them individually for them to be available. This is the meaning of the phrase 'critical path', once an asset is declared to be in the header it is 'critical' for that asset and all of its dependencies to load first.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.