使用extract-text-webpack-plugin和鏈接HTML標頭中的合併CSS文件有什麼區別？

根據我的理解，extract-text-webpack-plugin將您React組件中導入的所有css文件捆綁到一個單獨的CSS文件中。然後可以在HTML標頭中引用單獨的CSS文件，以防止FOUC（Flash Of Unstyled Content）。使用extract-text-webpack-plugin可以抵消在您的React組件js文件（例如熱載入）中導入CSS的一些好處。使用extract-text-webpack-plugin和鏈接HTML標頭中的合併CSS文件有什麼區別？

那麼，使用extract-text-webpack-plugin和將組件文件中的所有樣式表導入替換爲單個鏈接到HTML模板頭中的合併CSS文件之間的區別是什麼？

無論你使用CSS模塊還是導入你的CSS都有關係嗎？

更新：增加了澄清示例。

情形A：

component1.css（在component1.js進口）
component2.css（在component2.js進口）通過產生
捆綁CSS文件提取文本-webpack-插件（稱爲在HTML報頭）

情形B：

component1.css（在js文件未標記）
component2.css（在js文件未標記）使用SASS，Laravel mix.style方法等（稱爲在HTML報頭）
主CSS文件合併

爲什麼要與方案A而不是B？

來源

2017-08-15 ariebear

好問題ariebear！

如果你想使用css模塊，那麼肯定的，將css文件導入到你的js文件/反應組件肯定是有好處的。主要的一點是你不再需要關注範圍問題，或者擔心在兩個不同的領域編寫同一個課程。級聯變得侷限於每個組件。

如果你不使用css模塊，那麼根本沒有太大的好處。當然，你會重新加載，但還有其他解決方案可用。

希望有幫助！

來源

2017-08-27 20:13:39 mikeislearning

將所有樣式表合併爲一個的優點是瀏覽器爲每個樣式表單獨提出請求。如果你將幾個合併成一個，你只會提出一個請求。使用此插件，您的樣式將不再被內聯到您的JS包中，這可以提高性能，因爲CSS包將與JS包並行加載。

來源

2017-08-15 23:41:50 jcarapia

你在這裏問很多不同的問題，所以這裏是我的最佳鏡頭。

你會在生產中使用extract-text-plugin。在生產過程中不需要熱重新加載，並且您正確地擺脫了FOUC。列出straight from the source還有一些其他優點。

如果您希望或將它們分開，您仍然可以將您的.css導入組件。如果你導入或需要你的CSS，這與你是否使用es2015有關。

來源

2017-08-15 23:42:21 gretzky

我在嘗試使用extract-text-webpack-plugin之前閱讀了優點/注意事項表。他們中的很多人似乎解決了將CSS導入React組件js文件和創建單獨的樣式表之間的區別。我對此並不感到困惑。我對使用extract-text-plugin和使用替代實用程序合併CSS的區別感到困惑。我可以在我的React組件中簡單地刪除對css文件的所有引用，使用備用工具合併我的CSS文件並在HTML標頭中引用合併的文件。爲什麼使用extract-text-webpack-plugin？ – ariebear

我的意思是你有點回答你自己的問題。由於這些優點，您可以在生產環境中使用extract-text-plugin。我個人不知道另一個可以經得起extract-text處理的util。你知道嗎？ Extract-text可以輕鬆放入任何webpack配置並且速度很快，並且可以使用html-webpack-plugin注入輸出。是否有更好的替代工具？ – gretzky

對不起，我應該舉一個例子。場景A： 1. component1.css（在component1.js中導入），2. component2.css（在component2.js中導入）3.由extract-text-webpack-plugin生成的捆綁CSS文件（在HTML header）場景B： 1. component1.css（未在js文件中引用）2. component2.css（未在js文件中引用）3.使用SASS，Laravel mix.style方法合併的主CSS文件合併（在HTML標頭中調用）爲什麼要使用方案A而不是B？ – ariebear

使用extract-text-webpack-plugin和鏈接HTML標頭中的合併CSS文件有什麼區別？

回答

相關問題