有條件地加載腳本

我想根據瀏覽器版本有條件地加載幾個polyfills。例如，如果有人使用IE的一個版本訪問我的網站，但不支持document.addEventListener，那麼它應該加載相應的polyfill。有條件地加載腳本

Yepnope似乎是這個的理想工具，但它已被棄用，有利於更好的做法。這些都是原因，據其開發商：

當涉及到裝載的東西有條件，我們建議您輸出的正在測試的東西每個組合構建。 [...]。然後，您可以將您的頁面內嵌到的腳本中，該腳本僅加載（異步！）一個被調整爲該用戶功能的單個內置腳本。所有的性能贏得了有條件的加載，並且沒有任何一次加載100 的延遲問題。

那麼，這與Yepnope的原始方法有何不同呢？這不正是Yepnope的意圖嗎？有沒有其他輕量級腳本可以做到這一點，而不依賴於Modernizr或JQuery？

有關聚合物填充的最佳做法是什麼？檢測瀏覽器版本或按功能確定功能？

這些是很多問題，但我認爲它們都涉及同一個問題。謝謝！

來源

2015-06-15 Federico

用戶代理測試（即瀏覽器版本）通常充滿了危險 –

您可能會通過檢測用戶代理標頭並在瀏覽器不需要它時返回空JavaScript來執行此操作。 –

當它只是幾個polyfill時，它並不重要 - 文件將會很小，因此您可以將它發送到每個瀏覽器。不要忘記緩存和壓縮 - 只需正確設置您的服務器，您的polyfills文件將只加載一次，速度非常快。在遇到性能問題之前，請勿過度使用您的應用程序。

此外，如果你想添加專用它IE瀏覽器，使用IE conditional tags

來源

2015-06-15 18:27:30 smnbbrv

在舊方法，可以潛在地加載許多腳本。腳本加載器（是Yepnope或其他）測試您指定的功能，並且對於每個測試，它選擇要加載的腳本。

舉一個簡單的例子，讓我們說，要加載自己的腳本，再加上支持版本的jQuery的IE < 9如果需要的話，或者如果可能的較新的jQuery：

yepnope({ 
    "test" : document.attachEvent, 
    "yep" : 'jquery-1.11.3.js', 
    "nope" : 'jquery-2.1.4.js' 
}); 
yepnope({ 
    "load" : "myscript.js" 
});

在新的方法，你只加載一個腳本：它可能有幾個版本，但瀏覽器只關注其中的一個。這些不同的版本將處理瀏覽器功能的不同組合，但瀏覽器（和用戶）只需要關心一個文件。腳本加載器運行其測試，並根據結果選擇要下載的構建版本。

用上面的例子做這件事需要你建立myscript.js兩次。一個版本將與現代瀏覽器的jQuery 2.x連接，另一個版本將與jQuery 1.x連接，以便在舊瀏覽器中支持。你可能使yepnope在這種情況下工作，假設你有其他方式創建構建。它看起來像這樣：

yepnope({ 
    "test" : document.attachEvent, 
    "yep" : "myscript-oldie.js", 
    "nope" : "myscript-modern.js" 
});

但是，這留下了什麼用於構建工具的問題。許多其他的腳本加載程序-require.js，Browserify，webpack等等已經有了自己的工具來構建腳本。 Yepnope沒有，其後面的人決定其他裝載機已經建立了比他們可能的更好的腳本。

爲什麼這樣做？網絡延遲。 許多腳本 - 甚至可能最小 - 足夠小，以至於需要更多時間來設置和拆除HTTP請求，而不是實際下載文件。如果您可以將它們全部整合到一個文件中，那麼只需一個HTTP請求就可以獲得整個腳本，而不必爲每個模塊發出一個請求。即使正在下載的數據量沒有真正改變，這也可以提高您的性能。

來源

2015-06-15 18:37:05

這是一個很好的答案，但我確實有辦法構建腳本（Gulp + Browserify）。我沒有的是一種有條件地加載腳本的方法。有沒有一種方法可以讓Browserify自己做到這一點（即選擇在頁面加載時請求哪個構建）還是像Yepnope這樣的其他內容？如果是這樣的話，爲什麼不贊成Yepnope？ – Federico

有條件地加載腳本

回答

相關問題