本文目錄導(dǎo)讀：
Webpack 4 中的 CSS 拆分與優(yōu)化
在 Webpack 4 中，拆分 CSS 是一個(gè)常見(jiàn)的優(yōu)化策略，它可以幫助我們提高應(yīng)用的加載速度，提升用戶(hù)體驗(yàn)，以下是一些關(guān)于如何在 Webpack 4 中拆分 CSS 的方法。
使用 CSS 模塊化
Webpack 的 css-loader 支持 CSS 模塊化，通過(guò)將 CSS 文件拆分為多個(gè)模塊，每個(gè)模塊只包含一部分樣式，可以有效避免全局樣式?jīng)_突，使用import 或@import 語(yǔ)法導(dǎo)入 CSS 模塊即可。
二、使用 ExtractTextWebpackPlugin 或 MiniCssExtractPlugin
這兩個(gè)插件都可以將 CSS 從 JavaScript 中分離出來(lái)，生成獨(dú)立的 CSS 文件，ExtractTextWebpackPlugin 在 Webpack 3 中廣泛使用，而在 Webpack 4 中推薦使用 MiniCssExtractPlugin，安裝并配置插件后，CSS 會(huì)被自動(dòng)拆分到單獨(dú)的文件中。
使用 PurgeCSS 清除無(wú)用樣式
在拆分 CSS 后，可能會(huì)產(chǎn)生一些未被使用的樣式，PurgeCSS 可以幫助我們找出并刪除這些無(wú)用樣式，進(jìn)一步減小 CSS 文件的大小，只需在配置文件中指定要清除的樣式文件和不需要樣式的文件即可。
四、使用 SplitChunksPlugin 拆分公共庫(kù)
對(duì)于大型的 JavaScript 庫(kù)，如 React、Vue 等，它們也會(huì)引入相應(yīng)的 CSS 文件，使用 Webpack 的 SplitChunksPlugin 插件可以將這些公共庫(kù)的 CSS 拆分出來(lái)，實(shí)現(xiàn)代碼的復(fù)用和加載速度的提升。
Webpack 4 中拆分 CSS 的方法多種多樣，我們可以根據(jù)項(xiàng)目的實(shí)際需求選擇合適的方法，無(wú)論是使用 CSS 模塊化、ExtractTextWebpackPlugin 或 MiniCssExtractPlugin、PurgeCSS 還是 SplitChunksPlugin，都能幫助我們優(yōu)化項(xiàng)目的加載速度和用戶(hù)體驗(yàn)。
