Javascript 了解facebook.com上的代码拆分

我正在浏览关于Facebook如何重新设计其主页的帖子。它讨论了代码拆分和三层加载代码，以实现FastFirstPaint

第一个包加载页面的“骨架”，以指示数据的加载：

第二个包一次加载所有“折叠内容上方”：

第三个包包含页面其余部分的代码

考虑到Facebook使用React来构建他们的新网页，我想了解bundle-2中的代码与bundle-1中的代码是如何交互的

我的意思是，一旦bundle-2及其数据被加载，“UI框架”就会被在同一位置具有完整数据的实际组件所取代。这意味着在React代码中，我们必须：

将骨架组件放置在其他“内容”组件之外，或

我们可以用“内容”组件替换所有骨架组件的根

---

当我通过慢速连接加载页面时，我可以看到一些骨架组件在加载后没有被内容组件替换。这意味着他们要么复制了bundle-2中的骨架组件（对应于上面的案例2），要么通过丢弃相应的骨架组件（对应于上面的案例1），设法加载除骨架组件之外的所有“内容”组件。如果是这样的话，他们怎么能在React（代码级）中管理它呢？

我们可能永远也不知道Facebook到底做了什么（除非他们公开分享，我不知道这一点），但这可能是自动完成的。@Emilebergron:动态导入、懒惰和悬念只是导入代码的方式，也就是说，它们规定了代码的加载方式，而不是代码的放置位置。我的问题是关于后者。它的放置位置取决于您选择使用的捆绑机。例如，Webpack将传输代码（更改路径、制作不同的捆绑包等），并在加载捆绑包时合并这些捆绑包。看起来Facebook制作了自己的插件来传输特定捆绑包中的特定组件，这些组件在承诺解决时才可用。Webpack在构建时运行，而不是运行时。因此，在将bundle-2加载到浏览器中后，Webpack不可能从bundle-1中选择组件并将其合并到bundle-2中。而且，它们似乎并不是通过悬念之类的东西动态加载所有组件，因为这意味着每个组件都有一个单独的ajax调用。但FB将所有这些“内容组件”装入一个包（bundle-2），而不是单独装入。因此，无论是同步使用（普通

import…from

）还是异步使用（惰性、暂挂、

import（）

等），它都是完全透明的。Facebook做了自己的插件，以确保哪些bundle获得了哪些组件，并且在特定的序列中只获取了3个bundle，但这部分显然是专有的，因为它们只是掩盖了伪语法作为示例（例如，

importForDisplay

）。