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也支持了很長一段時間。