節點js - 用於http2的Bundler
[英]Node js - Bundler for http2
問題描述
我目前正在使用babel將es6代碼轉換為es5，並使用browserify捆綁它以在瀏覽器中使用它。 現在我開始使用http2服務器（Nginx）。
Http2在加載多個小文件而不是一個大包時更有效。
如何最好地提供多個js文件而不是一個大包？
2 個解決方案
解決方案1
1 2016-03-16 11:43:28
我知道SystemJS可以在開發中加載多個文件而不需要捆綁，對於生產，您可以使用DepCache來定義要導入的模塊的依賴樹
https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md
這種方法需要你拋棄browserfy並改為systemjs，因為它只使用bundle。
解決方案2
1 2016-03-16 23:16:18
我看到你到目前為止還沒有得到你問題的答案。 因此，我試圖幫助你，盡管HTTP / 2對我來說也是新的（它解釋了我的答案的長篇文章:-)）。
有關HTTP / 2的詳細信息可以在頁面https://blog.cloudflare.com/http-2-for-web-developers/上找到。 我再說一遍：
- 停止連接文件
- 停止內聯資產
- 停止分片域名
- 繼續最小化CSS / JavaScript文件
- 繼續從CDN加載
- 通過
<head>包含的<link rel='dns-prefetch' href='...' />繼續DNS預取 - ...
我想補充兩點關於設置HTTP頭Cache-Control和Link的重要性：
- 考慮在頁面的所有內容上設置
Cache-ControlHTTP標頭（尤其是max-age，expires和etag）。 詳情見下文。 我嚴格建議您閱讀緩存教程 。 - 設置
LinkHTTP標頭以使用HTTP / 2的SERVER PUSH。
HTTP標頭的設置LINK:是使用HTTP / 2的服務器推送功能很重要（見這里 ， 這里 ）。 RFC5988和RFC2068的第19.6.1.2節描述了HTTP 1.1中已存在的特性。 每個人都知道Content-Type: application/json ，但是以同樣的方式可以設置較少知道的Link: <...>; rel=prefetch Link: <...>; rel=prefetch ， 在這里描述。 例如，人們可以使用
Link: </app/script.js>; rel=preload; as=script
Link: </fonts/font.woff>; rel=preload; as=font
Link: </app/style.css>; rel=preload; as=style
在HTML頁面上設置的此類鏈接（如index.html ）將通知HTTP服務器將資源與HTML頁面上的響應一起推送 。 因此，您可以保存不需要的往返行程和后續請求（解析HTML文件后），並立即顯示資源。 您可以考慮在頁面上的所有圖片上設置LINK標題，以提高頁面的可見性。 在這里查看附帶有漂亮圖片的附加信息，這些信息展示了HTTP / 2服務器推送的優勢。 如果您使用PHP，那么代碼可能對您有意義。
大多數Web開發人員直接或間接地執行一些優化步驟 。 這些步驟在構建過程中或通過在HTTP響應中設置HTTP標頭來完成。 人們必須審查一些流程關閉某人並包含另一個流程。 我試着總結一下我的結果。
- 您可以考慮使用webpack而不是browserify來排除合並中的某些依賴項。 我不太了解browserify，但我知道webpack支持
externals（見這里 ），它允許從CDN加載一些模塊。 在下一步中，您可以刪除任何合並，但最小化並設置所有模塊的cache-control。 - 嚴格建議從CDN加載您使用的CSS / JS / Fonts，以及您自己未開發的。 你永遠不應該將這些資源與你的JavaScript文件合並 （你現在可以用browserify做什么）。 從服務器加載Bootstrap CSS不是一個好主意。 應該更好地遵循這里的建議並使用CDN而不是本地下載所有文件。
如果您檢查來自https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js的響應的HTTP標題，則使用CDN的主要原因很容易理解。 您將找到類似cache-control: public, max-age=30672000和expires:Mon, 06 Mar 2017 21:25:04 GMT 。 Chrome通常會顯示Status Code:200 (from cache) ，您將看不到網絡上的流量 。 如果您明確重新加載頁面（通過按F5 ），您將看到222字節和Status Code:304的響應。 換句話說，文件通常根本沒有加載。 jQuery 2.2.1永遠保持不變 。 下一個版本將有另一個URL 。 HTTPS的使用確保用戶將加載真正的jQuery 2.2.1。 如果還不夠，那么您可以使用https://www.srihash.org/計算sha384值並使用<link>或<script>擴展形式：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"
integrity="sha384-8C+3bW/ArbXinsJduAjm9O7WNnuOcO+Bok/VScRYikawtvz4ZPrpXtGfKIewM9dK"
crossorigin="anonymous"></script>
如果用戶打開包含鏈接的頁面，則會重新計算並驗證sha384哈希值（通過Chrome和Firefox）。 如果文件還沒有在本地緩存中，那么它也會很快加載。 從https://code.jquery.com/jquery-2.2.1.min.js加載相同文件的一個簡短說法今天使用HTTP 1.1，但來自https://cdnjs.cloudflare.com/ajax/libs/ jquery / 2.2.1 / jquery.min.js使用HTTP / 2協議。 我建議通過選擇CDN來測試協議。 您可以在此處找到支持HTTP / 2的CDN列表。 以同樣的方式從https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css加載Bootstrap，今天會使用HTTP 1.1，但是可以通過加載相同的數據來使用HTTP / 2 https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css 。
我花了很多時間讓CDN明確表示CDN的最大優點是設置HTTP響應的兌現標頭和不可變URL的使用 。 您也可以在模塊中執行相同的操作。
- 應該考慮從服務器返回的每個內容的緩存時間。 您可以使用包含組件版本號的模塊的URL（如
/script/mycomponent1.1.12341），並在每次更改模塊時更改版本號的最后一部分。 您可以在cache-control設置足夠長的max-age值，並且您的組件將由客戶端的Web瀏覽器緩存。
最后，我建議您驗證是否安裝了最新版本的OpenSSL和最新版本的nginx 。 我建議您在http://www.webpagetest.org/和https://www.ssllabs.com/ssltest/中驗證您的網站，以確保您不會忘記任何簡單的步驟。
Node JS：雙向 GRPC 調用會打開多個 http2 連接嗎？
[英]Node JS: Will a Bidirection GRPC Call Open Multiple http2 Connections?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.