Js from third-party module isn't called with dev/js/merge_files 1

[acromatica]

Hi. I'm trying to add Magefan blog (https://github.com/magefan/module-blog) to the site using Breeze theme. It works in dev mode when js files aren't merged, but when I run bin/magento config:set dev/js/merge_files 1 the js class for lazy loading the posts isn't being called.
The class in question is Lazyload from vendor/magefan/module-blog/view/frontend/web/js/lazyload.js, I've included it into breeze_default.xml:

<referenceBlock name="breeze.js">
    <arguments>
        <argument name="bundles" xsi:type="array">
            <item name="default" xsi:type="array">
                <item name="items" xsi:type="array">
                    <item name="Magefan_Blog/js/lib/mfblogunveil" xsi:type="array">
                        <item name="path" xsi:type="string">Magefan_Blog/js/lib/mfblogunveil</item>
                    </item>
                    <item name="Magefan_Blog/js/lazyload" xsi:type="array">
                        <item name="path" xsi:type="string">Magefan_Blog/js/lazyload</item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

I see that the code is added to default.min.js, but then the class Lazyload is never called.
In an unmerged version the call comes from vendor/swissup/module-breeze/view/frontend/web/js/core/main.js:373

From what I see, in an unmerged version the function that automatically mounts the components has these values:

var name = $.breezemap.__aliases[data.__component] || data.__component, // 'Magefan_Blog/js/lazyload'
    component = $.breezemap[name] // ƒ (options){new Lazyload(options)}

And when I set dev/js/merge_files 1 the second value is undefined:

var name = $.breezemap.__aliases[data.__component] || data.__component, // 'Magefan_Blog/js/lazyload'
    component = $.breezemap[name] // undefined

[vovayatsyuk]

Hello!

Yes, there is a difference in how scripts behave when bundled or not.

When the script is not bundled Breeze tries to automatically assign its component according to filepath. When the script is bundled we can't do that.

There are two ways of fixing this issue:

1. Move the script to dynamic bundle, or use load rules, so it will never be bundled.
2. Add component: 'Magefan_Blog/js/lazyload' to the component as described in the integration tutorial: https://breezefront.com/docs/integration-example#3-add-component-name

p.s. We already have an integration with magefan/blog, so I welcome you to add a PR with lazyload integration :)
p.p.s We use load rules in our integration. Have a look: https://github.com/breezefront/module-breeze-magefan-blog/blob/master/view/frontend/layout/breeze_default.xml

[acromatica]

Cool, thank you so much for the details!