縮小CSS意味著刪除不必要的字符，例如whitespace，評論和線路斷裂而不會更改功能，從而產(chǎn)生較小的文件尺寸和更快的頁面加載時間。 1。對於快速，一次性縮小，使用在線工具（例如CSSMINIFIER.com），Clean CSS或Toptal CSS minifier，通過粘貼代碼，單擊“縮小”並複制輸出，這是對初學(xué)者友好型，但對大型項目或敏感代碼不理想。 2。對於開發(fā)人員，使用構(gòu)建工具自動化該過程：選項A-通過安裝node.js和所需的軟件包使用CSSNANO的PostCSS，創(chuàng)建配置文件，將腳本添加到package.json。選項B-使用CSS-Minimizer-Webpack-Plugin使用WebPack，通過安裝插件，更新WebPack配置並在生產(chǎn)模式下運行WebPack以自動縮小CSS。 3。通過安裝Gulp-CSSNANO和GULP-RENAME，使用諸如Gulp之類的任務(wù)跑步者，設(shè)置Gulpfile.js來定義縮小任務(wù)，並運行它以處理和保存壓縮文件，適用於傳統(tǒng)工作流程。 4。使用服務(wù)器端或CMS工具：在WordPress中，插件自動啟動或WP Rocket Hander CSS css Minification sinification suinfience confience；靜態(tài)站點生成器，例如Jekyll或Hugo支持內(nèi)置或基於插件的縮影；諸如CloudFlare或Netlify之類的CDN通常提供自動縮小功能。一個縮小的CSS示例刪除了所有額外的空間和評論，轉(zhuǎn)動.header {padding：20px;顏色：＃333;字體大?。?6px; } /這是註釋 /進入.hader {padding：20px; color：＃333; font-size：16px}，在較小的文件中提供相同的樣式?？s小CSS可以提高性能，尤其是在移動連接或緩慢連接上，應(yīng)使用基於項目的技術(shù)堆棧使用適當?shù)墓ぞ呒谏a(chǎn)環(huán)境中自動化。

縮小CSS意味著在沒有更改其功能的情況下，從CSS代碼中刪除所有不必要的字符（例如空格，評論和線路斷開）。這使文件較小，從而提高了頁面負載速度和整體性能。這是有效做到的方法。

1。使用在線CSS minifier（快速簡便）

如果您有一個小的CSS文件或僅需要一次縮小，則在線工具是最快的選擇。

流行工具：

• CSS minifier（cssminifier.com）
• 清潔CSS
• Toptal CSS minifier

如何使用：

• 將您的CSS代碼粘貼到輸入框中
• 點擊“縮小”
• 複製壓縮輸出

?專業(yè)人士：沒有設(shè)置，對初學(xué)者友好
?缺點：對於大型項目或自動化而言並不理想

??避免將在線工具用於敏感或?qū)Ｓ写a，因為您將其上傳到第三方服務(wù)器。

2。使用構(gòu)建工具（用於開發(fā)人員）

如果您正在從事一個真實的項目，請使用構(gòu)建工具自動化量化。這些都集成到您的工作流程中，並且每次進行更改時都可以縮小CSS。

選項A：與CSSNANO一起使用PostCSS

PostCSS是一種功能強大的工具，可通過插件轉(zhuǎn)換CSS。 cssnano是一個減小CSS的插件。

步驟：

1. 安裝node.js（如果尚未安裝）
2. 跑步：

    NPM安裝PostCSS CSSNANO POSTCSS-CLI-SAVE-DEV

3. 創(chuàng)建一個postcss.config.js ：

    Module.exports = {
     插件：[
       require（'cssnano'）（{
         預(yù)設(shè)：“默認”
       }））
     這是給出的
   }

4. 將腳本添加到package.json ：

    “腳本”：{
     “ minify -css”：“ PostCSS styles.css -o styles.min.css”
   }

5. 跑步：

    NPM運行縮放CSS

?優(yōu)點：可自動化，適合現(xiàn)代開發(fā)工作流程
?與React，Vue等這樣的框架效果很好。

選項B：使用WebPack

如果您使用的是WebPack，請使用css-minimizer-webpack-plugin 。

1. 安裝：

    NPM安裝CSS-Minimizer-Webpack-Plugin-Save-dev

2. 更新webpack.config.js ：

    const cssminimizerplugin = require（'css-minimizer-webpack-plugin'）;
   
   Module.exports = {
     最佳化: {
       最小化：是的，
       最小化：[
         新的CSSMinimizerPlugin（）
       這是給出的
     }
   };

現(xiàn)在，當您運行webpack --mode production時，您的CSS將自動縮小。

3。使用任務(wù)跑步者（例如Gulp或Grunt）

對於較舊的工作流程，Gulp仍然是一個可靠的選擇。

gulp的例子：

1. 安裝：

    NPM安裝Gulp-CSSNANO GULP-RENAME-SAVE-DEV

2. 創(chuàng)建gulpfile.js ：

    const gulp = require（'gulp'）;
   const cssnano = require（'gulp-cssnano'）;
   const rename = require（'Gulp-rename'）;
   
   gulp.task（'minify-css'，function（）{
     返回Gulp.src（'SRC/styles.css'）
       .pipe（cssnano（））
       .pipe（Rename（'styles.min.css'））
       .pipe（gulp.dest（'dist/'））;
   }）;

3. 跑步：

    Gulp縮小CSS

4。使用服務(wù)器端或CMS工具

如果您對命令行工具不滿意：

• WordPress ：插件會自動升級或WP Rocket自動縮小CSS。
• 靜態(tài)站點生成器（例如Jekyll，Hugo）：使用內(nèi)置的縮小或插件。
• CDN服務(wù)（Cloudflare，Netlify）：通常包括自動縮小。

獎金：CSS的樣子是什麼

原來的：

 .header {
  填充：20px;
  顏色：＃333;
  字體大?。?6px;
}
/ *這是評論 */

縮?。?/strong>

 。

所有額外的空間和評論都消失了 - 標準樣式，較小的文件。