在Webpack捆绑库上模拟fbasyncInit行为

Question

我正在使用webpack构建针对浏览器的库。而且我真的很想在不手动修改捆绑库的情况下复制fbasyncinit行为。

webpack是否提供任何在加载库本身后调用函数的方法？

还是有另一个替代捆绑器允许这样做？

对于那些不知道的人，window.fbasyncinit是在加载完成后facebook sdk调用的函数，因此您编写了用于初始化facebook sdk内容的函数。

Answer 1

根据您的设置，您可能希望将库设为外部，并将其lazy load插入目标应用程序。简而言之，这意味着您的库与应用程序并存，但实际上不会在初始化时加载。然后可以通过事件或在某个setTimeout之后加载它。

Webpack会监视特殊注释，以告知需要将哪些代码分成自己的捆绑包：

button.onclick = event => {
    const loadLodash = await import(/* webpackChunkName: "lodash" */ "lodash");
    console.log('lodash loaded');
};

这种评论/* webpackChunkName: "lodash" */就是其中一种。请注意，除非发生任何事件或超时，否则不会加载您的库。

说实话，我还没有特别针对库执行此操作，因此我不确定这可能给这里带来的困难。

更新

实际上，对此可能会有一个更简单的答案。我忘记了延迟加载实际上只是动态地将一个带有src的脚本标签创建到要加载的库中（例如，使用捆绑的lodash库）。

var script = document.createElement('script');
script.src = 'http://localhost:8080/vendors.[hash].js';
document.head.appendChild(script);

如果您需要控制何时加载库，可以在其他一些代码（刚刚加载库的东西）检测到页面加载之后以这种方式触发它。

更新2

重新阅读此内容后，也可能就像在知道将库加载到应用程序后（假设您的库不依赖于任何网络调用）触发某个事件后触发fbasyncinit模拟行为一样简单初始化）。所有其他想法也适用，但可能比您需要的更为复杂。在尝试外部/延迟加载解决方案之前，建议您在您的库中查看类似以下的简单内容：

window.addEventListener('load', event => {
    // your custom fbasyncinit behavior here
});

这当然是在页面中的所有内容都加载完之后，根据您的需要可能为时已晚。