[{"data":1,"prerenderedAt":1188},["ShallowReactive",2],{"guide-build-tool-css-minification-compared":3},{"id":4,"title":5,"body":6,"date":1180,"description":1181,"extension":1182,"meta":1183,"navigation":419,"path":1184,"readingTime":321,"seo":1185,"stem":1186,"__hash__":1187},"guides\u002Fguides\u002Fbuild-tool-css-minification-compared.md","Build Tool CSS Minification Compared: Vite, Webpack, Rollup, esbuild",{"type":7,"value":8,"toc":1164},"minimark",[9,14,18,21,25,175,179,184,195,265,271,329,348,352,362,577,588,592,599,675,681,689,692,695,718,721,729,733,736,823,841,845,927,931,934,1055,1058,1087,1091,1123,1127,1148,1152,1160],[10,11,13],"h2",{"id":12},"why-css-minification-matters","Why CSS Minification Matters",[15,16,17],"p",{},"CSS minification removes whitespace, comments, and redundant values from stylesheets. On a typical project, minification reduces CSS size by 20–30% — a meaningful improvement for page load performance.",[15,19,20],{},"Most modern build tools handle CSS minification automatically in production mode, but the defaults vary in aggressiveness, configurability, and output quality. Understanding these differences helps you choose the right setup for your project.",[10,22,24],{"id":23},"what-css-minifiers-do","What CSS Minifiers Do",[26,27,28,47],"table",{},[29,30,31],"thead",{},[32,33,34,38,41,44],"tr",{},[35,36,37],"th",{},"Optimization",[35,39,40],{},"Example Before",[35,42,43],{},"Example After",[35,45,46],{},"Typical Savings",[48,49,50,70,88,104,121,138,156],"tbody",{},[32,51,52,56,62,67],{},[53,54,55],"td",{},"Remove whitespace",[53,57,58],{},[59,60,61],"code",{},"margin: 10px ;",[53,63,64],{},[59,65,66],{},"margin:10px",[53,68,69],{},"High",[32,71,72,75,80,85],{},[53,73,74],{},"Remove comments",[53,76,77],{},[59,78,79],{},"\u002F* header *\u002F .nav {}",[53,81,82],{},[59,83,84],{},".nav{}",[53,86,87],{},"Moderate",[32,89,90,93,98,102],{},[53,91,92],{},"Merge longhand → shorthand",[53,94,95],{},[59,96,97],{},"margin-top:10px;margin-right:10px",[53,99,100],{},[59,101,66],{},[53,103,87],{},[32,105,106,109,114,118],{},[53,107,108],{},"Remove redundant values",[53,110,111],{},[59,112,113],{},"margin:10px 10px 10px 10px",[53,115,116],{},[59,117,66],{},[53,119,120],{},"Low",[32,122,123,126,131,136],{},[53,124,125],{},"Optimize color values",[53,127,128],{},[59,129,130],{},"color:#ff0000",[53,132,133],{},[59,134,135],{},"color:red",[53,137,120],{},[32,139,140,143,148,154],{},[53,141,142],{},"Remove empty rules",[53,144,145],{},[59,146,147],{},".empty {}",[53,149,150],{},[151,152,153],"em",{},"(removed)",[53,155,120],{},[32,157,158,161,167,172],{},[53,159,160],{},"Deduplicate selectors",[53,162,163,164],{},"Two ",[59,165,166],{},".btn{color:red}",[53,168,169,170],{},"One ",[59,171,166],{},[53,173,174],{},"Varies",[10,176,178],{"id":177},"tool-by-tool-comparison","Tool-by-Tool Comparison",[180,181,183],"h3",{"id":182},"vite","Vite",[15,185,186,187,190,191,194],{},"Vite uses PostCSS with ",[59,188,189],{},"cssnano"," by default in production builds. Configuration lives in ",[59,192,193],{},"vite.config.ts",":",[196,197,202],"pre",{"className":198,"code":199,"language":200,"meta":201,"style":201},"language-typescript shiki shiki-themes github-light github-dark","\u002F\u002F vite.config.ts\nexport default defineConfig({\n  build: {\n    cssMinify: true,  \u002F\u002F Default in production\n  },\n})\n","typescript","",[59,203,204,213,231,237,253,259],{"__ignoreMap":201},[205,206,209],"span",{"class":207,"line":208},"line",1,[205,210,212],{"class":211},"sJ8bj","\u002F\u002F vite.config.ts\n",[205,214,216,220,223,227],{"class":207,"line":215},2,[205,217,219],{"class":218},"szBVR","export",[205,221,222],{"class":218}," default",[205,224,226],{"class":225},"sScJk"," defineConfig",[205,228,230],{"class":229},"sVt8B","({\n",[205,232,234],{"class":207,"line":233},3,[205,235,236],{"class":229},"  build: {\n",[205,238,240,243,247,250],{"class":207,"line":239},4,[205,241,242],{"class":229},"    cssMinify: ",[205,244,246],{"class":245},"sj4cs","true",[205,248,249],{"class":229},",  ",[205,251,252],{"class":211},"\u002F\u002F Default in production\n",[205,254,256],{"class":207,"line":255},5,[205,257,258],{"class":229},"  },\n",[205,260,262],{"class":207,"line":261},6,[205,263,264],{"class":229},"})\n",[15,266,267,268,194],{},"For more control, replace the default with ",[59,269,270],{},"lightningcss",[196,272,274],{"className":198,"code":273,"language":200,"meta":201,"style":201},"export default defineConfig({\n  css: {\n    transformer: 'lightningcss',\n  },\n  build: {\n    cssMinify: 'lightningcss',\n  },\n})\n",[59,275,276,286,291,303,307,311,319,324],{"__ignoreMap":201},[205,277,278,280,282,284],{"class":207,"line":208},[205,279,219],{"class":218},[205,281,222],{"class":218},[205,283,226],{"class":225},[205,285,230],{"class":229},[205,287,288],{"class":207,"line":215},[205,289,290],{"class":229},"  css: {\n",[205,292,293,296,300],{"class":207,"line":233},[205,294,295],{"class":229},"    transformer: ",[205,297,299],{"class":298},"sZZnC","'lightningcss'",[205,301,302],{"class":229},",\n",[205,304,305],{"class":207,"line":239},[205,306,258],{"class":229},[205,308,309],{"class":207,"line":255},[205,310,236],{"class":229},[205,312,313,315,317],{"class":207,"line":261},[205,314,242],{"class":229},[205,316,299],{"class":298},[205,318,302],{"class":229},[205,320,322],{"class":207,"line":321},7,[205,323,258],{"class":229},[205,325,327],{"class":207,"line":326},8,[205,328,264],{"class":229},[15,330,331,335,336,338,339,341,344,345,347],{},[332,333,334],"strong",{},"Pros",": Excellent defaults, fast builds via esbuild in dev, ",[59,337,270],{}," option is significantly faster than ",[59,340,189],{},[332,342,343],{},"Cons",": Limited fine-grained control over which ",[59,346,189],{}," optimizations run (without ejecting to custom PostCSS config)",[180,349,351],{"id":350},"webpack","Webpack",[15,353,354,355,358,359,194],{},"Webpack delegates CSS minification to the ",[59,356,357],{},"MiniCssExtractPlugin"," combined with ",[59,360,361],{},"css-minimizer-webpack-plugin",[196,363,367],{"className":364,"code":365,"language":366,"meta":201,"style":201},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F webpack.config.js\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin')\nconst CssMinimizerPlugin = require('css-minimizer-webpack-plugin')\n\nmodule.exports = {\n  module: {\n    rules: [\n      { test: \u002F\\.css$\u002F, use: [MiniCssExtractPlugin.loader, 'css-loader'] },\n    ],\n  },\n  optimization: {\n    minimizer: [\n      new CssMinimizerPlugin({\n        minimizerOptions: {\n          preset: ['advanced', { discardUnused: false }],\n        },\n      }),\n    ],\n  },\n  plugins: [new MiniCssExtractPlugin()],\n}\n","javascript",[59,368,369,374,397,415,421,437,442,447,478,484,489,495,501,511,517,535,541,547,552,557,571],{"__ignoreMap":201},[205,370,371],{"class":207,"line":208},[205,372,373],{"class":211},"\u002F\u002F webpack.config.js\n",[205,375,376,379,382,385,388,391,394],{"class":207,"line":215},[205,377,378],{"class":218},"const",[205,380,381],{"class":245}," MiniCssExtractPlugin",[205,383,384],{"class":218}," =",[205,386,387],{"class":225}," require",[205,389,390],{"class":229},"(",[205,392,393],{"class":298},"'mini-css-extract-plugin'",[205,395,396],{"class":229},")\n",[205,398,399,401,404,406,408,410,413],{"class":207,"line":233},[205,400,378],{"class":218},[205,402,403],{"class":245}," CssMinimizerPlugin",[205,405,384],{"class":218},[205,407,387],{"class":225},[205,409,390],{"class":229},[205,411,412],{"class":298},"'css-minimizer-webpack-plugin'",[205,414,396],{"class":229},[205,416,417],{"class":207,"line":239},[205,418,420],{"emptyLinePlaceholder":419},true,"\n",[205,422,423,426,429,432,434],{"class":207,"line":255},[205,424,425],{"class":245},"module",[205,427,428],{"class":229},".",[205,430,431],{"class":245},"exports",[205,433,384],{"class":218},[205,435,436],{"class":229}," {\n",[205,438,439],{"class":207,"line":261},[205,440,441],{"class":229},"  module: {\n",[205,443,444],{"class":207,"line":321},[205,445,446],{"class":229},"    rules: [\n",[205,448,449,452,455,459,463,466,469,472,475],{"class":207,"line":326},[205,450,451],{"class":229},"      { test:",[205,453,454],{"class":298}," \u002F",[205,456,458],{"class":457},"snhLl","\\.",[205,460,462],{"class":461},"sA_wV","css",[205,464,465],{"class":218},"$",[205,467,468],{"class":298},"\u002F",[205,470,471],{"class":229},", use: [MiniCssExtractPlugin.loader, ",[205,473,474],{"class":298},"'css-loader'",[205,476,477],{"class":229},"] },\n",[205,479,481],{"class":207,"line":480},9,[205,482,483],{"class":229},"    ],\n",[205,485,487],{"class":207,"line":486},10,[205,488,258],{"class":229},[205,490,492],{"class":207,"line":491},11,[205,493,494],{"class":229},"  optimization: {\n",[205,496,498],{"class":207,"line":497},12,[205,499,500],{"class":229},"    minimizer: [\n",[205,502,504,507,509],{"class":207,"line":503},13,[205,505,506],{"class":218},"      new",[205,508,403],{"class":225},[205,510,230],{"class":229},[205,512,514],{"class":207,"line":513},14,[205,515,516],{"class":229},"        minimizerOptions: {\n",[205,518,520,523,526,529,532],{"class":207,"line":519},15,[205,521,522],{"class":229},"          preset: [",[205,524,525],{"class":298},"'advanced'",[205,527,528],{"class":229},", { discardUnused: ",[205,530,531],{"class":245},"false",[205,533,534],{"class":229}," }],\n",[205,536,538],{"class":207,"line":537},16,[205,539,540],{"class":229},"        },\n",[205,542,544],{"class":207,"line":543},17,[205,545,546],{"class":229},"      }),\n",[205,548,550],{"class":207,"line":549},18,[205,551,483],{"class":229},[205,553,555],{"class":207,"line":554},19,[205,556,258],{"class":229},[205,558,560,563,566,568],{"class":207,"line":559},20,[205,561,562],{"class":229},"  plugins: [",[205,564,565],{"class":218},"new",[205,567,381],{"class":225},[205,569,570],{"class":229},"()],\n",[205,572,574],{"class":207,"line":573},21,[205,575,576],{"class":229},"}\n",[15,578,579,581,582,584,585,587],{},[332,580,334],{},": Full control over ",[59,583,189],{}," preset, mature ecosystem, widely documented\n",[332,586,343],{},": Slow builds on large projects, verbose configuration",[180,589,591],{"id":590},"rollup","Rollup",[15,593,594,595,598],{},"Rollup requires ",[59,596,597],{},"rollup-plugin-postcss"," for CSS handling:",[196,600,602],{"className":364,"code":601,"language":366,"meta":201,"style":201},"import postcss from 'rollup-plugin-postcss'\n\nexport default {\n  plugins: [\n    postcss({\n      minimize: true,\n      extract: 'styles.css',\n    }),\n  ],\n}\n",[59,603,604,618,622,630,635,642,651,661,666,671],{"__ignoreMap":201},[205,605,606,609,612,615],{"class":207,"line":208},[205,607,608],{"class":218},"import",[205,610,611],{"class":229}," postcss ",[205,613,614],{"class":218},"from",[205,616,617],{"class":298}," 'rollup-plugin-postcss'\n",[205,619,620],{"class":207,"line":215},[205,621,420],{"emptyLinePlaceholder":419},[205,623,624,626,628],{"class":207,"line":233},[205,625,219],{"class":218},[205,627,222],{"class":218},[205,629,436],{"class":229},[205,631,632],{"class":207,"line":239},[205,633,634],{"class":229},"  plugins: [\n",[205,636,637,640],{"class":207,"line":255},[205,638,639],{"class":225},"    postcss",[205,641,230],{"class":229},[205,643,644,647,649],{"class":207,"line":261},[205,645,646],{"class":229},"      minimize: ",[205,648,246],{"class":245},[205,650,302],{"class":229},[205,652,653,656,659],{"class":207,"line":321},[205,654,655],{"class":229},"      extract: ",[205,657,658],{"class":298},"'styles.css'",[205,660,302],{"class":229},[205,662,663],{"class":207,"line":326},[205,664,665],{"class":229},"    }),\n",[205,667,668],{"class":207,"line":480},[205,669,670],{"class":229},"  ],\n",[205,672,673],{"class":207,"line":486},[205,674,576],{"class":229},[15,676,677,678,680],{},"By default it uses ",[59,679,189],{},". You can pass custom PostCSS plugins for different minifiers.",[15,682,683,685,686,688],{},[332,684,334],{},": Simple API when you just need basic CSS extraction and minification\n",[332,687,343],{},": Less ecosystem support than Webpack for CSS-specific features like code splitting",[180,690,691],{"id":691},"esbuild",[15,693,694],{},"esbuild can bundle CSS but has limited minification capabilities:",[196,696,700],{"className":697,"code":698,"language":699,"meta":201,"style":201},"language-bash shiki shiki-themes github-light github-dark","esbuild app.css --bundle --minify --outfile=dist\u002Fapp.css\n","bash",[59,701,702],{"__ignoreMap":201},[205,703,704,706,709,712,715],{"class":207,"line":208},[205,705,691],{"class":225},[205,707,708],{"class":298}," app.css",[205,710,711],{"class":245}," --bundle",[205,713,714],{"class":245}," --minify",[205,716,717],{"class":245}," --outfile=dist\u002Fapp.css\n",[15,719,720],{},"esbuild's CSS minification is fast but basic — it removes whitespace and comments but doesn't perform advanced optimizations like merging longhand properties or converting colors.",[15,722,723,725,726,728],{},[332,724,334],{},": Extremely fast — processes large CSS files近乎瞬间\n",[332,727,343],{},": No advanced optimizations, no PostCSS plugin support for CSS minification",[10,730,732],{"id":731},"output-size-comparison","Output Size Comparison",[15,734,735],{},"These results come from minifying a 150 KB CSS file (Tailwind output + custom styles):",[26,737,738,754],{},[29,739,740],{},[32,741,742,745,748,751],{},[35,743,744],{},"Tool",[35,746,747],{},"Output Size",[35,749,750],{},"Minification Ratio",[35,752,753],{},"Build Time",[48,755,756,769,782,796,810],{},[32,757,758,761,764,767],{},[53,759,760],{},"Unminified",[53,762,763],{},"150 KB",[53,765,766],{},"—",[53,768,766],{},[32,770,771,773,776,779],{},[53,772,691],{},[53,774,775],{},"112 KB",[53,777,778],{},"25%",[53,780,781],{},"15ms",[32,783,784,787,790,793],{},[53,785,786],{},"cssnano (default)",[53,788,789],{},"105 KB",[53,791,792],{},"30%",[53,794,795],{},"850ms",[32,797,798,801,804,807],{},[53,799,800],{},"cssnano (advanced)",[53,802,803],{},"100 KB",[53,805,806],{},"33%",[53,808,809],{},"1200ms",[32,811,812,814,817,820],{},[53,813,270],{},[53,815,816],{},"102 KB",[53,818,819],{},"32%",[53,821,822],{},"45ms",[15,824,825,828,829,831,832,834,835,837,838,840],{},[332,826,827],{},"Takeaway",": ",[59,830,270],{}," achieves near-",[59,833,189],{}," quality at 20× the speed. For most projects, the 2–3 KB difference between ",[59,836,270],{}," and ",[59,839,189],{}," isn't worth the build time penalty.",[10,842,844],{"id":843},"choosing-based-on-project-needs","Choosing Based on Project Needs",[26,846,847,860],{},[29,848,849],{},[32,850,851,854,857],{},[35,852,853],{},"Scenario",[35,855,856],{},"Recommended Setup",[35,858,859],{},"Why",[48,861,862,875,890,903,914],{},[32,863,864,867,872],{},[53,865,866],{},"New project, any framework",[53,868,869,870],{},"Vite + ",[59,871,270],{},[53,873,874],{},"Best speed-to-quality ratio",[32,876,877,880,887],{},[53,878,879],{},"Existing Webpack project",[53,881,882,884,885],{},[59,883,361],{}," + ",[59,886,189],{},[53,888,889],{},"No migration needed",[32,891,892,895,900],{},[53,893,894],{},"Library build (small CSS)",[53,896,897,898],{},"Rollup + ",[59,899,189],{},[53,901,902],{},"Clean output, tree-shaking",[32,904,905,908,911],{},[53,906,907],{},"Ultra-fast CI builds",[53,909,910],{},"esbuild CSS minify",[53,912,913],{},"Speed matters more than 5% size difference",[32,915,916,919,924],{},[53,917,918],{},"Maximum compression",[53,920,921,923],{},[59,922,189],{}," advanced preset",[53,925,926],{},"Every byte counts (mobile, embedded)",[10,928,930],{"id":929},"advanced-custom-cssnano-configuration","Advanced: Custom cssnano Configuration",[15,932,933],{},"If you need specific optimizations enabled or disabled:",[196,935,937],{"className":364,"code":936,"language":366,"meta":201,"style":201},"\u002F\u002F postcss.config.js\nmodule.exports = {\n  plugins: [\n    require('cssnano')({\n      preset: [\n        'advanced',\n        {\n          discardComments: { removeAll: true },\n          mergeLonghand: true,\n          cssDeclarationSorter: false,  \u002F\u002F Disable if order matters for specificity\n          reduceIdents: false,          \u002F\u002F Disable to preserve animation names\n        },\n      ],\n    }),\n  ],\n}\n",[59,938,939,944,956,960,973,978,985,990,1000,1009,1021,1034,1038,1043,1047,1051],{"__ignoreMap":201},[205,940,941],{"class":207,"line":208},[205,942,943],{"class":211},"\u002F\u002F postcss.config.js\n",[205,945,946,948,950,952,954],{"class":207,"line":215},[205,947,425],{"class":245},[205,949,428],{"class":229},[205,951,431],{"class":245},[205,953,384],{"class":218},[205,955,436],{"class":229},[205,957,958],{"class":207,"line":233},[205,959,634],{"class":229},[205,961,962,965,967,970],{"class":207,"line":239},[205,963,964],{"class":225},"    require",[205,966,390],{"class":229},[205,968,969],{"class":298},"'cssnano'",[205,971,972],{"class":229},")({\n",[205,974,975],{"class":207,"line":255},[205,976,977],{"class":229},"      preset: [\n",[205,979,980,983],{"class":207,"line":261},[205,981,982],{"class":298},"        'advanced'",[205,984,302],{"class":229},[205,986,987],{"class":207,"line":321},[205,988,989],{"class":229},"        {\n",[205,991,992,995,997],{"class":207,"line":326},[205,993,994],{"class":229},"          discardComments: { removeAll: ",[205,996,246],{"class":245},[205,998,999],{"class":229}," },\n",[205,1001,1002,1005,1007],{"class":207,"line":480},[205,1003,1004],{"class":229},"          mergeLonghand: ",[205,1006,246],{"class":245},[205,1008,302],{"class":229},[205,1010,1011,1014,1016,1018],{"class":207,"line":486},[205,1012,1013],{"class":229},"          cssDeclarationSorter: ",[205,1015,531],{"class":245},[205,1017,249],{"class":229},[205,1019,1020],{"class":211},"\u002F\u002F Disable if order matters for specificity\n",[205,1022,1023,1026,1028,1031],{"class":207,"line":491},[205,1024,1025],{"class":229},"          reduceIdents: ",[205,1027,531],{"class":245},[205,1029,1030],{"class":229},",          ",[205,1032,1033],{"class":211},"\u002F\u002F Disable to preserve animation names\n",[205,1035,1036],{"class":207,"line":497},[205,1037,540],{"class":229},[205,1039,1040],{"class":207,"line":503},[205,1041,1042],{"class":229},"      ],\n",[205,1044,1045],{"class":207,"line":513},[205,1046,665],{"class":229},[205,1048,1049],{"class":207,"line":519},[205,1050,670],{"class":229},[205,1052,1053],{"class":207,"line":537},[205,1054,576],{"class":229},[15,1056,1057],{},"Common options to toggle:",[1059,1060,1061,1075,1081],"ul",{},[1062,1063,1064,1067,1068,837,1071,1074],"li",{},[59,1065,1066],{},"reduceIdents",": Renames ",[59,1069,1070],{},"@keyframes",[59,1072,1073],{},"@counter-style"," identifiers — disable if you reference them from JavaScript",[1062,1076,1077,1080],{},[59,1078,1079],{},"cssDeclarationSorter",": Reorders declarations — disable if property order affects your overrides",[1062,1082,1083,1086],{},[59,1084,1085],{},"autoprefixer",": Add vendor prefixes during minification rather than as a separate step",[10,1088,1090],{"id":1089},"key-takeaways","Key Takeaways",[1059,1092,1093,1096,1101,1106,1109,1115],{},[1062,1094,1095],{},"CSS minification typically reduces file size by 20–30%",[1062,1097,869,1098,1100],{},[59,1099,270],{}," offers the best speed-to-quality ratio for most projects",[1062,1102,1103,1105],{},[59,1104,189],{}," with advanced preset achieves maximum compression but is significantly slower",[1062,1107,1108],{},"esbuild minifies CSS instantly but skips advanced optimizations like shorthand merging",[1062,1110,1111,1112,1114],{},"Webpack requires explicit ",[59,1113,361],{}," configuration",[1062,1116,1117,1118,837,1120,1122],{},"Be cautious with ",[59,1119,1066],{},[59,1121,1079],{}," — they can break JavaScript-referenced animation names and specificity-dependent overrides",[10,1124,1126],{"id":1125},"related-guides","Related Guides",[1059,1128,1129,1136,1142],{},[1062,1130,1131],{},[1132,1133,1135],"a",{"href":1134},"\u002Fguides\u002Fcss-minification-guide","CSS Minification Guide",[1062,1137,1138],{},[1132,1139,1141],{"href":1140},"\u002Fguides\u002Fcss-compression-techniques","CSS Compression Techniques",[1062,1143,1144],{},[1132,1145,1147],{"href":1146},"\u002Fguides\u002Fcss-critical-path-optimization","CSS Critical Path Optimization",[10,1149,1151],{"id":1150},"try-it-yourself","Try It Yourself",[15,1153,1154,1155,1159],{},"Minify your CSS instantly with our free ",[1132,1156,1158],{"href":1157},"\u002Ftools\u002Fcss-minifier","CSS Minifier",". Paste your stylesheet and get optimized output in one click — no build setup required.",[1161,1162,1163],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":201,"searchDepth":215,"depth":215,"links":1165},[1166,1167,1168,1174,1175,1176,1177,1178,1179],{"id":12,"depth":215,"text":13},{"id":23,"depth":215,"text":24},{"id":177,"depth":215,"text":178,"children":1169},[1170,1171,1172,1173],{"id":182,"depth":233,"text":183},{"id":350,"depth":233,"text":351},{"id":590,"depth":233,"text":591},{"id":691,"depth":233,"text":691},{"id":731,"depth":215,"text":732},{"id":843,"depth":215,"text":844},{"id":929,"depth":215,"text":930},{"id":1089,"depth":215,"text":1090},{"id":1125,"depth":215,"text":1126},{"id":1150,"depth":215,"text":1151},"2026-05-28","Compare CSS minification across Vite, Webpack, Rollup, and esbuild — output sizes, configuration, and tradeoffs for each bundler.","md",{"immutable":419},"\u002Fguides\u002Fbuild-tool-css-minification-compared",{"title":5,"description":1181},"guides\u002Fbuild-tool-css-minification-compared","rQBK2hsDQUbmVbK1R2ilIll-S_EQfZgu43rCQaHwBa8",1780401331942]