Module Library JS Some In Header Some In Footer 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
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 &amp;$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.