模拟webpack捆绑库上的fbasyncInit行为

Question

我正在使用webpack构建一个针对浏览器的库.我真的想复制fbasyncinit行为而无需手动修改捆绑的库.

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

或者是否有其他替代捆绑包允许这样做？

对于那些不知道的人,window.fbasyncinit是完成加载时facebook sdk调用的函数,所以你编写了初始化facebook sdk的函数.

Answer 1

根据您的设置，您可能希望将库设为外部库并将其延迟加载到目标应用程序中。简而言之，这意味着您的库与应用程序一起存在，但实际上不会在初始化时加载。然后可以通过事件或某些事件后加载它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
});

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