HTTP/2: 如何在不捆绑的情况下在浏览器中加载 npm 模块？

Question

我现在使用 Browserify 将我的客户端模块打包成包。然后将每个包作为脚本标签加载。

但是对于 HTTP/2，我的理解是 捆绑和缩小不再是最佳实践，因为客户端和服务器之间的同时连接数量很大。

那么如何在不捆绑的情况下在浏览器中加载 npm 模块？

我想我想能够做到

var someModule = require('some-module');

并从服务器动态获取 'some-module'。

（我知道这可能会对年长的 HTTP/1.1 客户产生不利影响。）

Answer 1

根据您使用什么将 JS 构建成有用的浏览器包，工具会有所不同。

如果您使用的是 webpack，它们具有延迟加载的内置功能： https://github.com/webpack/bundle-loader

如果您使用的是 browserify，则有一个名为 externalize 的模块旨在执行此操作： https://github.com/epeli/browserify-externalize

如果您使用的是其他东西，我建议您搜索该构建器的名称和 "lazy loading"。我知道 RequireJS 也支持这个很久了。

Answer 2

你不能（没有黑客 and/or 重写文件），因为 CJS require 是同步的。即使可以，它仍然很慢。

需要挂起JS线程等待依赖加载执行。如果不修改源文件，这样做将需要像同步 XHR 或 document.write 这样的 hack，但这些将无法并行加载依赖项。

理论上你可以使用一些工具重写文件以将命令式 require 转换为回调驱动的（有点像将 CJS 转换为 AMD 或 ES5 的 ES6 yield 编译器），但这可能会打败你按原样使用 npm 模块的目标。

最后，即使你可以加载它们（或使用 ES6 模块并到未来旅行一点），它仍然比捆绑慢，因为浏览器不知道完整的依赖树，所以它必须等待发现依赖项的依赖项。

如果您想以较小的部分加载您的应用程序，我推荐使用 webpack 分块（使用 the analyzer 查找应用程序的可分块部分）。不过，它需要使用异步 require.ensure(cb)。

HTTP/2: how do I load npm modules in the browser without bundling?