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

Question

我现在使用Browserify将我的客户端模块捆绑到捆绑中。然后每个包都作为脚本标签加载。

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

那么如何在浏览器中加载npm模块而不捆绑呢？

我想我希望能够做

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

而且具有动态服务器获取“一些模块”。

（我知道可能有不利影响在较旧的HTTP/1.1客户端。）

Answer 1

因为CJS require是同步的，所以您不能（不用黑客和/或重写文件）。即使你可以，它仍然会很慢。

JS线程需要暂停等待依赖被加载和执行。如果不修改源文件，则需要像XHR或document.write这样的黑客入侵，但这些将无法并行加载依赖项。

理论上，您可以使用一些工具来重写文件，以将命令式的需求转换为回调驱动的文件（类似于将CJS转换为AMD或ES6 yield编译器），但这可能会破坏您的使用目标npm模块原样。最后，即使你可以加载它们（或者使用ES6模块并且稍后旅行），它仍然会比捆绑更慢，因为浏览器不知道完整的依赖关系树，所以它具有等待发现依赖关系的依赖关系。

如果您想将小应用程序加载到应用程序中，我建议您使用webpack chunking（使用the analyzer查找应用程序的块状部分）。但它需要使用异步require.ensure(cb)。

Answer 2

取决于你使用建立自己的JS成有用的浏览器捆绑什么，该工具会有所不同。

如果您使用的WebPack，他们有一个内置的功能为延迟加载： https://github.com/webpack/bundle-loader

如果您使用browserify，有一个模块调用外部化，其目的是要做到这一点： https://github.com/epeli/browserify-externalize

如果您正在使用其他的东西，我建议您搜索该构建器的名称和“延迟加载”。我知道RequireJS也支持了很长一段时间。