實現按需載入JS、CSS該使用什麼前端工具比較合適？

新接觸前端的項目，由於兼容性問題，現在打算同一套HTML，但是低版本瀏覽器使用一套CSS和JS，高版本瀏覽器使用另外一套CSS和JS。

瀏覽器的判斷現在已經做好，接下來就是CSS和JS的按需載入。網上了解過建議使用REQUIREJS，但在知乎上找過一些文章看到不同的評價。有的說REQUIREJS足夠了，有的說REQUIREJS落後了應該用WEBPACK。

只測試過使用REQUIREJS來做，不過做出來的實際效果會發生閃屏的現象，也就是說在網頁載入的那一刻，內容是亂糟糟的，但載入了js和css了以後，內容會正常顯示。大概知道這是因為非同步載入所以會有這樣的情況，但這樣其實對於用戶體驗來說並不是太好。

作為前端，對於這種情況，一般都是採用什麼方法解決的？謝謝

---

你所說的按需載入和RequireJs按需載入概念不一樣，你是需要對用戶終端實現載入不同的css,js資源，這個最好由後端去處理；而RequireJs的按需載入是動態載入，是指對於某些JavaScript模塊，需要用到，才去載入，不需要用就不需要載入，如：

define(test, function (require) {
return {
useA: function() {
var a = require(a);
console.log(a);
},
useB: function() {
var b = require(b);
console.log(b);
}
}
});

require([test]， function(obj) {
obj.useA();
});


這裡只會載入a模塊，不會載入b模塊，如果你之後有使用useB()方法，則會載入b模塊。

另外，requireJs本身並沒有實現對CSS的按需載入，插件倒是有require-css。

---

謝邀，我有個網站，為了區別手機訪問，和PC訪問，我現在的做法是在後端進去判斷，返回不同的js和css。

其實就是通過PHP判斷agent 返回不同的模板頁面。

示例網頁，

庫巴 蘋果6手機殼6Plus套iPhone6磨砂6s全包軟殼紅7防摔6P女潮-tmall.com天貓

我這個網站的主要功能是讓淘寶商品鏈接可以在微信中展示

所以客戶訪問這個網址會根據不同瀏覽器，渲染不同頁面，分三種情況：

PC訪問一種顯示，

手機微信瀏覽器，載入不同的CSS和JS適配微認瀏覽器

手機自帶瀏覽器直接跳轉

---

這種應該用後端實現，判斷agent，然後返回不同版本js，css。nginx就可以實現。

---

閃屏其實很好解決，主要是樣式的問題，猜測你的css組織應該是通用css直出+瀏覽器適配css非同步，只要在通用css里將body設置visibility:hidden，在適配css里設置成visible就不會有閃屏，但白屏時間會延長。

還可以用向下兼容的思路進一步優化，高級瀏覽器css直出+低端瀏覽器css補丁非同步，這樣只有低端瀏覽器的白屏時間會延長，對高級瀏覽器沒有影響。

---

通常我們會使用nginx讀取User-Agent返回對應的靜態資源，另外會跟node伺服器端渲染配合使用，具體的有時間慢慢分享

---

推薦閱讀：