Create Magento module to load dependencies

[DrewML]

baler has 2 pieces that are necessary for bundling to work within Magento.

• baler - an npm package used to package bundles and generate configuration
• Magento_Baler - a Magento module that injects necessary <link rel="preload" /> tags into the head of the document

Requirements

1. Module must be named Magento_Baler
2. Module must be published to Magento's composer repository
3. Module must be compatible with all versions of Magento supported by the Cloud team

Artifacts made available by baler

When baler is run, is spits out 2 different types of artifacts

1. core-bundle.js
2. baler-preload-map.json (see Generate baler-preload-map.json #3)

When should Magento_Baler be considered enabled for a given theme?

1. When Magento_Baler is an enabled module in the store
2. When the locale folder for the current theme contains a file called requirejs-baler-config.js

What Work Should Magento_Baler Do?

Loading of Core Bundle

On each request:

1. Replace requirejs-config.js in the head of the document with requirejs-baler-config.js
2. In the head of the document, add a preload tag that points to balerbundles/core-bundle.js in the root of the current theme's current locale

Loading of Dynamic Dependencies

On each request

1. Collect a list of file paths for all .phtml files being used to render the current request
2. Read/Parse baler-preload-map.json, which is a sibling of core-bundle.js in the root of the locale.
3. Create a new list, preloads
4. For each key in baler-preload-map.json:
   • Check if the .phtml file at that path was used to render
   • If yes, append the dependencies to preloads
5. De-duplicate the preloads list
6. For each entry in preloads, add a preload tag to the head of the document

Disabling Incompatible Features

The following features should be disabled when Magento_Baler is enabled:

• JS Bundling
• JS Minification

Stretch Goals

• Make sure the list of .phtml files loaded keeps the order these were loaded on the page. When injecting preload tags in the head, inject them in the same order that the .phtml files were rendered (this effectively prioritizes content higher in the document)

[DrewML]

cc @vzabaznov @adifucan

[DrewML]

@adifucan has a good amount of this work done, we just need to get the module public to get some early feedback

[adifucan]

Here is a public repo with Magento_Baler module for inserting bundles configuration into the head of the document: https://github.com/adifucan/m2-baler
It's not 100% complete yet. Just for alpha testing.

[DrewML]

This now lives in the Magento org on Github: https://github.com/magento/m2-baler