[{"data":1,"prerenderedAt":1301},["ShallowReactive",2],{"guide-css-bundling-tools":3},{"id":4,"title":5,"body":6,"date":1293,"description":1294,"extension":1295,"meta":1296,"navigation":395,"path":1297,"readingTime":173,"seo":1298,"stem":1299,"__hash__":1300},"guides\u002Fguides\u002Fcss-bundling-tools.md","CSS Bundling and Minification Tools Compared",{"type":7,"value":8,"toc":1265},"minimark",[9,14,18,21,25,29,32,38,54,59,70,75,195,198,201,205,219,223,234,239,315,318,321,325,342,346,357,361,474,478,481,484,488,499,503,514,519,542,546,549,553,564,568,579,583,603,607,610,614,628,632,643,648,757,761,993,997,1001,1010,1014,1019,1023,1028,1032,1037,1041,1050,1054,1058,1137,1141,1197,1201,1221,1225,1234,1238,1261],[10,11,13],"h2",{"id":12},"why-your-tool-choice-matters","Why Your Tool Choice Matters",[15,16,17],"p",{},"Not all CSS minifiers produce the same output. Differences in optimization aggressiveness, speed, and integration options mean the right tool depends on your project size, build pipeline, and performance goals.",[15,19,20],{},"This guide compares the most popular CSS minification tools so you can make an informed choice.",[10,22,24],{"id":23},"standalone-minifiers","Standalone Minifiers",[26,27,28],"h3",{"id":28},"cssnano",[15,30,31],{},"cssnano is the most widely used CSS minifier in the PostCSS ecosystem. It runs as a PostCSS plugin and applies over 30 optimizations by default.",[15,33,34],{},[35,36,37],"strong",{},"Strengths:",[39,40,41,45,48,51],"ul",{},[42,43,44],"li",{},"Mature and battle-tested — used by Bootstrap, Tailwind, and millions of sites",[42,46,47],{},"Modular — enable or disable specific optimizations via preset configuration",[42,49,50],{},"Integrates seamlessly with any PostCSS pipeline",[42,52,53],{},"Safe defaults — optimizations that could break CSS are disabled by default",[15,55,56],{},[35,57,58],{},"Weaknesses:",[39,60,61,64,67],{},[42,62,63],{},"Slower than newer tools on large files",[42,65,66],{},"Configuration can be confusing with many preset options",[42,68,69],{},"Some advanced optimizations require explicit opt-in",[15,71,72],{},[35,73,74],{},"Basic setup:",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F postcss.config.js\nmodule.exports = {\n  plugins: [\n    require('cssnano')({\n      preset: ['default', {\n        discardComments: { removeAll: true },\n        normalizeWhitespace: true\n      }]\n    })\n  ]\n}\n","js","",[83,84,85,94,115,121,138,150,162,171,177,183,189],"code",{"__ignoreMap":81},[86,87,90],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"sJ8bj","\u002F\u002F postcss.config.js\n",[86,95,97,101,105,108,112],{"class":88,"line":96},2,[86,98,100],{"class":99},"sj4cs","module",[86,102,104],{"class":103},"sVt8B",".",[86,106,107],{"class":99},"exports",[86,109,111],{"class":110},"szBVR"," =",[86,113,114],{"class":103}," {\n",[86,116,118],{"class":88,"line":117},3,[86,119,120],{"class":103},"  plugins: [\n",[86,122,124,128,131,135],{"class":88,"line":123},4,[86,125,127],{"class":126},"sScJk","    require",[86,129,130],{"class":103},"(",[86,132,134],{"class":133},"sZZnC","'cssnano'",[86,136,137],{"class":103},")({\n",[86,139,141,144,147],{"class":88,"line":140},5,[86,142,143],{"class":103},"      preset: [",[86,145,146],{"class":133},"'default'",[86,148,149],{"class":103},", {\n",[86,151,153,156,159],{"class":88,"line":152},6,[86,154,155],{"class":103},"        discardComments: { removeAll: ",[86,157,158],{"class":99},"true",[86,160,161],{"class":103}," },\n",[86,163,165,168],{"class":88,"line":164},7,[86,166,167],{"class":103},"        normalizeWhitespace: ",[86,169,170],{"class":99},"true\n",[86,172,174],{"class":88,"line":173},8,[86,175,176],{"class":103},"      }]\n",[86,178,180],{"class":88,"line":179},9,[86,181,182],{"class":103},"    })\n",[86,184,186],{"class":88,"line":185},10,[86,187,188],{"class":103},"  ]\n",[86,190,192],{"class":88,"line":191},11,[86,193,194],{"class":103},"}\n",[26,196,197],{"id":197},"clean-css",[15,199,200],{},"clean-css is a fast, standalone minifier with no PostCSS dependency. It focuses on raw performance and aggressive optimization.",[15,202,203],{},[35,204,37],{},[39,206,207,210,213,216],{},[42,208,209],{},"Very fast — one of the quickest standalone minifiers",[42,211,212],{},"Aggressive optimizations including advanced selector merging",[42,214,215],{},"No PostCSS dependency — works as a standalone CLI or Node.js library",[42,217,218],{},"Level 1 and Level 2 optimization controls for fine-tuning aggressiveness",[15,220,221],{},[35,222,58],{},[39,224,225,228,231],{},[42,226,227],{},"Less active development compared to cssnano and lightning-css",[42,229,230],{},"Some aggressive optimizations can break edge cases",[42,232,233],{},"Not a PostCSS plugin — harder to integrate into existing PostCSS pipelines",[15,235,236],{},[35,237,238],{},"Basic usage:",[76,240,242],{"className":78,"code":241,"language":80,"meta":81,"style":81},"const CleanCSS = require('clean-css')\nconst output = new CleanCSS({\n  level: 2 \u002F\u002F enables advanced optimizations\n}).minify(input)\nconsole.log(output.styles)\n",[83,243,244,265,282,293,304],{"__ignoreMap":81},[86,245,246,249,252,254,257,259,262],{"class":88,"line":89},[86,247,248],{"class":110},"const",[86,250,251],{"class":99}," CleanCSS",[86,253,111],{"class":110},[86,255,256],{"class":126}," require",[86,258,130],{"class":103},[86,260,261],{"class":133},"'clean-css'",[86,263,264],{"class":103},")\n",[86,266,267,269,272,274,277,279],{"class":88,"line":96},[86,268,248],{"class":110},[86,270,271],{"class":99}," output",[86,273,111],{"class":110},[86,275,276],{"class":110}," new",[86,278,251],{"class":126},[86,280,281],{"class":103},"({\n",[86,283,284,287,290],{"class":88,"line":117},[86,285,286],{"class":103},"  level: ",[86,288,289],{"class":99},"2",[86,291,292],{"class":92}," \u002F\u002F enables advanced optimizations\n",[86,294,295,298,301],{"class":88,"line":123},[86,296,297],{"class":103},"}).",[86,299,300],{"class":126},"minify",[86,302,303],{"class":103},"(input)\n",[86,305,306,309,312],{"class":88,"line":140},[86,307,308],{"class":103},"console.",[86,310,311],{"class":126},"log",[86,313,314],{"class":103},"(output.styles)\n",[26,316,317],{"id":317},"lightning-css",[15,319,320],{},"lightning-css is the newest entry, built in Rust for maximum speed. It handles minification, bundling, and syntax lowering in a single pass.",[15,322,323],{},[35,324,37],{},[39,326,327,330,333,336,339],{},[42,328,329],{},"Extremely fast — 10–100x faster than JavaScript-based minifiers",[42,331,332],{},"All-in-one: minifies, bundles, and lowers modern CSS syntax",[42,334,335],{},"Written in Rust via WASM — runs in Node.js without native binaries",[42,337,338],{},"Supports CSS nesting, custom media queries, and other modern features",[42,340,341],{},"Browser-compatible targets — lowers syntax for older browsers",[15,343,344],{},[35,345,58],{},[39,347,348,351,354],{},[42,349,350],{},"Newer ecosystem — fewer plugins and less community documentation",[42,352,353],{},"Less configurable than cssnano — opinionated optimization set",[42,355,356],{},"WASM binary adds ~2 MB to node_modules",[15,358,359],{},[35,360,238],{},[76,362,364],{"className":78,"code":363,"language":80,"meta":81,"style":81},"const { transform } = require('lightningcss')\n\nconst { code } = transform({\n  filename: 'style.css',\n  code: Buffer.from(input),\n  minify: true,\n  targets: {\n    chrome: 95 \u003C\u003C 16\n  }\n})\n",[83,365,366,391,397,414,425,436,445,450,464,469],{"__ignoreMap":81},[86,367,368,370,373,376,379,382,384,386,389],{"class":88,"line":89},[86,369,248],{"class":110},[86,371,372],{"class":103}," { ",[86,374,375],{"class":99},"transform",[86,377,378],{"class":103}," } ",[86,380,381],{"class":110},"=",[86,383,256],{"class":126},[86,385,130],{"class":103},[86,387,388],{"class":133},"'lightningcss'",[86,390,264],{"class":103},[86,392,393],{"class":88,"line":96},[86,394,396],{"emptyLinePlaceholder":395},true,"\n",[86,398,399,401,403,405,407,409,412],{"class":88,"line":117},[86,400,248],{"class":110},[86,402,372],{"class":103},[86,404,83],{"class":99},[86,406,378],{"class":103},[86,408,381],{"class":110},[86,410,411],{"class":126}," transform",[86,413,281],{"class":103},[86,415,416,419,422],{"class":88,"line":123},[86,417,418],{"class":103},"  filename: ",[86,420,421],{"class":133},"'style.css'",[86,423,424],{"class":103},",\n",[86,426,427,430,433],{"class":88,"line":140},[86,428,429],{"class":103},"  code: Buffer.",[86,431,432],{"class":126},"from",[86,434,435],{"class":103},"(input),\n",[86,437,438,441,443],{"class":88,"line":152},[86,439,440],{"class":103},"  minify: ",[86,442,158],{"class":99},[86,444,424],{"class":103},[86,446,447],{"class":88,"line":164},[86,448,449],{"class":103},"  targets: {\n",[86,451,452,455,458,461],{"class":88,"line":173},[86,453,454],{"class":103},"    chrome: ",[86,456,457],{"class":99},"95",[86,459,460],{"class":110}," \u003C\u003C",[86,462,463],{"class":99}," 16\n",[86,465,466],{"class":88,"line":179},[86,467,468],{"class":103},"  }\n",[86,470,471],{"class":88,"line":185},[86,472,473],{"class":103},"})\n",[10,475,477],{"id":476},"bundler-integrated-minifiers","Bundler-Integrated Minifiers",[26,479,480],{"id":480},"esbuild",[15,482,483],{},"esbuild includes built-in CSS minification alongside its JavaScript bundling. No configuration needed.",[15,485,486],{},[35,487,37],{},[39,489,490,493,496],{},[42,491,492],{},"Blazing fast — built in Go, processes CSS alongside JS bundling",[42,494,495],{},"Zero configuration for basic minification",[42,497,498],{},"Consistent tool for both JS and CSS in one pipeline",[15,500,501],{},[35,502,58],{},[39,504,505,508,511],{},[42,506,507],{},"Basic minification only — no selector merging or advanced optimizations",[42,509,510],{},"Does not transform modern CSS syntax (nesting, custom media)",[42,512,513],{},"Limited control over minification options",[15,515,516],{},[35,517,518],{},"Usage:",[76,520,524],{"className":521,"code":522,"language":523,"meta":81,"style":81},"language-bash shiki shiki-themes github-light github-dark","esbuild style.css --bundle --minify --outfile=style.min.css\n","bash",[83,525,526],{"__ignoreMap":81},[86,527,528,530,533,536,539],{"class":88,"line":89},[86,529,480],{"class":126},[86,531,532],{"class":133}," style.css",[86,534,535],{"class":99}," --bundle",[86,537,538],{"class":99}," --minify",[86,540,541],{"class":99}," --outfile=style.min.css\n",[26,543,545],{"id":544},"parcel","Parcel",[15,547,548],{},"Parcel auto-detects CSS files and applies minification in production builds using lightning-css under the hood.",[15,550,551],{},[35,552,37],{},[39,554,555,558,561],{},[42,556,557],{},"Zero configuration — works out of the box",[42,559,560],{},"Uses lightning-css internally for fast, modern optimization",[42,562,563],{},"Handles bundling, dependency resolution, and hashing automatically",[15,565,566],{},[35,567,58],{},[39,569,570,573,576],{},[42,571,572],{},"Less control over minification specifics",[42,574,575],{},"Tied to the Parcel ecosystem — not usable standalone",[42,577,578],{},"Debugging minification issues requires understanding Parcel's internal pipeline",[15,580,581],{},[35,582,518],{},[76,584,586],{"className":521,"code":585,"language":523,"meta":81,"style":81},"parcel build src\u002Findex.html\n# CSS minification happens automatically in production\n",[83,587,588,598],{"__ignoreMap":81},[86,589,590,592,595],{"class":88,"line":89},[86,591,544],{"class":126},[86,593,594],{"class":133}," build",[86,596,597],{"class":133}," src\u002Findex.html\n",[86,599,600],{"class":88,"line":96},[86,601,602],{"class":92},"# CSS minification happens automatically in production\n",[26,604,606],{"id":605},"webpack-css-minimizer-webpack-plugin","Webpack + css-minimizer-webpack-plugin",[15,608,609],{},"Webpack users add css-minimizer-webpack-plugin to minify CSS extracted by mini-css-extract-plugin. It supports multiple minifier backends.",[15,611,612],{},[35,613,37],{},[39,615,616,619,622,625],{},[42,617,618],{},"Works within existing Webpack configurations",[42,620,621],{},"Supports cssnano, clean-css, and lightning-css as backends",[42,623,624],{},"Integrates with source map generation",[42,626,627],{},"Parallel processing for large CSS bundles",[15,629,630],{},[35,631,58],{},[39,633,634,637,640],{},[42,635,636],{},"Requires multiple plugins (extract + minimize) working together",[42,638,639],{},"More configuration overhead than zero-config tools",[42,641,642],{},"Build speed depends on chosen minifier backend",[15,644,645],{},[35,646,647],{},"Configuration:",[76,649,651],{"className":78,"code":650,"language":80,"meta":81,"style":81},"\u002F\u002F webpack.config.js\nconst CssMinimizerPlugin = require('css-minimizer-webpack-plugin')\n\nmodule.exports = {\n  optimization: {\n    minimizer: [\n      new CssMinimizerPlugin({\n        minimizerOptions: {\n          preset: ['default', { discardComments: { removeAll: true } }]\n        }\n      })\n    ]\n  }\n}\n",[83,652,653,658,676,680,692,697,702,711,716,731,736,741,747,752],{"__ignoreMap":81},[86,654,655],{"class":88,"line":89},[86,656,657],{"class":92},"\u002F\u002F webpack.config.js\n",[86,659,660,662,665,667,669,671,674],{"class":88,"line":96},[86,661,248],{"class":110},[86,663,664],{"class":99}," CssMinimizerPlugin",[86,666,111],{"class":110},[86,668,256],{"class":126},[86,670,130],{"class":103},[86,672,673],{"class":133},"'css-minimizer-webpack-plugin'",[86,675,264],{"class":103},[86,677,678],{"class":88,"line":117},[86,679,396],{"emptyLinePlaceholder":395},[86,681,682,684,686,688,690],{"class":88,"line":123},[86,683,100],{"class":99},[86,685,104],{"class":103},[86,687,107],{"class":99},[86,689,111],{"class":110},[86,691,114],{"class":103},[86,693,694],{"class":88,"line":140},[86,695,696],{"class":103},"  optimization: {\n",[86,698,699],{"class":88,"line":152},[86,700,701],{"class":103},"    minimizer: [\n",[86,703,704,707,709],{"class":88,"line":164},[86,705,706],{"class":110},"      new",[86,708,664],{"class":126},[86,710,281],{"class":103},[86,712,713],{"class":88,"line":173},[86,714,715],{"class":103},"        minimizerOptions: {\n",[86,717,718,721,723,726,728],{"class":88,"line":179},[86,719,720],{"class":103},"          preset: [",[86,722,146],{"class":133},[86,724,725],{"class":103},", { discardComments: { removeAll: ",[86,727,158],{"class":99},[86,729,730],{"class":103}," } }]\n",[86,732,733],{"class":88,"line":185},[86,734,735],{"class":103},"        }\n",[86,737,738],{"class":88,"line":191},[86,739,740],{"class":103},"      })\n",[86,742,744],{"class":88,"line":743},12,[86,745,746],{"class":103},"    ]\n",[86,748,750],{"class":88,"line":749},13,[86,751,468],{"class":103},[86,753,755],{"class":88,"line":754},14,[86,756,194],{"class":103},[10,758,760],{"id":759},"feature-comparison","Feature Comparison",[762,763,764,787],"table",{},[765,766,767],"thead",{},[768,769,770,774,776,778,780,782,784],"tr",{},[771,772,773],"th",{},"Feature",[771,775,28],{},[771,777,197],{},[771,779,317],{},[771,781,480],{},[771,783,545],{},[771,785,786],{},"Webpack",[788,789,790,814,837,857,877,896,915,934,953,972],"tbody",{},[768,791,792,798,801,804,807,809,811],{},[793,794,795],"td",{},[35,796,797],{},"Speed",[793,799,800],{},"Medium",[793,802,803],{},"Fast",[793,805,806],{},"Very Fast",[793,808,806],{},[793,810,806],{},[793,812,813],{},"Varies",[768,815,816,821,824,827,829,832,834],{},[793,817,818],{},[35,819,820],{},"Selector merging",[793,822,823],{},"Yes",[793,825,826],{},"Yes (L2)",[793,828,823],{},[793,830,831],{},"No",[793,833,823],{},[793,835,836],{},"Via backend",[768,838,839,844,846,848,850,853,855],{},[793,840,841],{},[35,842,843],{},"Value optimization",[793,845,823],{},[793,847,823],{},[793,849,823],{},[793,851,852],{},"Basic",[793,854,823],{},[793,856,836],{},[768,858,859,864,867,869,871,873,875],{},[793,860,861],{},[35,862,863],{},"Modern CSS syntax",[793,865,866],{},"Partial",[793,868,831],{},[793,870,823],{},[793,872,831],{},[793,874,823],{},[793,876,836],{},[768,878,879,884,886,888,890,892,894],{},[793,880,881],{},[35,882,883],{},"Browser targeting",[793,885,831],{},[793,887,831],{},[793,889,823],{},[793,891,831],{},[793,893,823],{},[793,895,836],{},[768,897,898,903,905,907,909,911,913],{},[793,899,900],{},[35,901,902],{},"CSS bundling",[793,904,831],{},[793,906,831],{},[793,908,823],{},[793,910,823],{},[793,912,823],{},[793,914,823],{},[768,916,917,922,924,926,928,930,932],{},[793,918,919],{},[35,920,921],{},"Source maps",[793,923,823],{},[793,925,823],{},[793,927,823],{},[793,929,823],{},[793,931,823],{},[793,933,823],{},[768,935,936,941,943,945,947,949,951],{},[793,937,938],{},[35,939,940],{},"PostCSS plugin",[793,942,823],{},[793,944,831],{},[793,946,831],{},[793,948,831],{},[793,950,831],{},[793,952,836],{},[768,954,955,960,962,964,966,968,970],{},[793,956,957],{},[35,958,959],{},"Zero config",[793,961,831],{},[793,963,831],{},[793,965,831],{},[793,967,823],{},[793,969,823],{},[793,971,831],{},[768,973,974,979,982,985,987,989,991],{},[793,975,976],{},[35,977,978],{},"Maintenance",[793,980,981],{},"Active",[793,983,984],{},"Low",[793,986,981],{},[793,988,981],{},[793,990,981],{},[793,992,981],{},[10,994,996],{"id":995},"which-tool-should-you-choose","Which Tool Should You Choose?",[26,998,1000],{"id":999},"for-simple-projects-or-quick-tasks","For simple projects or quick tasks",[15,1002,1003,1004,1006,1007,1009],{},"Use ",[35,1005,480],{}," or ",[35,1008,545],{},". Zero configuration, fast builds, and good enough minification for most cases.",[26,1011,1013],{"id":1012},"for-postcss-based-pipelines","For PostCSS-based pipelines",[15,1015,1003,1016,1018],{},[35,1017,28],{},". It fits naturally into your existing PostCSS setup and offers the most granular control over which optimizations run.",[26,1020,1022],{"id":1021},"for-maximum-performance","For maximum performance",[15,1024,1003,1025,1027],{},[35,1026,317],{},". If you're processing large CSS bundles or running builds in CI, the speed difference is significant. It also handles modern CSS syntax lowering, which saves you from adding separate PostCSS plugins.",[26,1029,1031],{"id":1030},"for-aggressive-optimization","For aggressive optimization",[15,1033,1003,1034,1036],{},[35,1035,197],{}," with Level 2 optimizations. It applies the most aggressive selector merging and deduplication, which can yield the smallest output — but test carefully.",[26,1038,1040],{"id":1039},"for-webpack-projects","For Webpack projects",[15,1042,1003,1043,1046,1047,1049],{},[35,1044,1045],{},"css-minimizer-webpack-plugin"," with ",[35,1048,317],{}," as the backend. You get Webpack integration with the fastest minification available.",[10,1051,1053],{"id":1052},"integration-examples","Integration Examples",[26,1055,1057],{"id":1056},"vite-lightning-css","Vite + lightning-css",[76,1059,1061],{"className":78,"code":1060,"language":80,"meta":81,"style":81},"\u002F\u002F vite.config.js\nimport { lightningcss } from 'vite-plugin-lightningcss'\n\nexport default {\n  plugins: [\n    lightningcss({\n      minify: true,\n      targets: { chrome: 95 }\n    })\n  ]\n}\n",[83,1062,1063,1068,1081,1085,1095,1099,1106,1115,1125,1129,1133],{"__ignoreMap":81},[86,1064,1065],{"class":88,"line":89},[86,1066,1067],{"class":92},"\u002F\u002F vite.config.js\n",[86,1069,1070,1073,1076,1078],{"class":88,"line":96},[86,1071,1072],{"class":110},"import",[86,1074,1075],{"class":103}," { lightningcss } ",[86,1077,432],{"class":110},[86,1079,1080],{"class":133}," 'vite-plugin-lightningcss'\n",[86,1082,1083],{"class":88,"line":117},[86,1084,396],{"emptyLinePlaceholder":395},[86,1086,1087,1090,1093],{"class":88,"line":123},[86,1088,1089],{"class":110},"export",[86,1091,1092],{"class":110}," default",[86,1094,114],{"class":103},[86,1096,1097],{"class":88,"line":140},[86,1098,120],{"class":103},[86,1100,1101,1104],{"class":88,"line":152},[86,1102,1103],{"class":126},"    lightningcss",[86,1105,281],{"class":103},[86,1107,1108,1111,1113],{"class":88,"line":164},[86,1109,1110],{"class":103},"      minify: ",[86,1112,158],{"class":99},[86,1114,424],{"class":103},[86,1116,1117,1120,1122],{"class":88,"line":173},[86,1118,1119],{"class":103},"      targets: { chrome: ",[86,1121,457],{"class":99},[86,1123,1124],{"class":103}," }\n",[86,1126,1127],{"class":88,"line":179},[86,1128,182],{"class":103},[86,1130,1131],{"class":88,"line":185},[86,1132,188],{"class":103},[86,1134,1135],{"class":88,"line":191},[86,1136,194],{"class":103},[26,1138,1140],{"id":1139},"nextjs-cssnano","Next.js + cssnano",[76,1142,1144],{"className":78,"code":1143,"language":80,"meta":81,"style":81},"\u002F\u002F postcss.config.js\nmodule.exports = {\n  plugins: {\n    cssnano: {\n      preset: ['default', { discardComments: { removeAll: true } }]\n    }\n  }\n}\n",[83,1145,1146,1150,1162,1167,1172,1184,1189,1193],{"__ignoreMap":81},[86,1147,1148],{"class":88,"line":89},[86,1149,93],{"class":92},[86,1151,1152,1154,1156,1158,1160],{"class":88,"line":96},[86,1153,100],{"class":99},[86,1155,104],{"class":103},[86,1157,107],{"class":99},[86,1159,111],{"class":110},[86,1161,114],{"class":103},[86,1163,1164],{"class":88,"line":117},[86,1165,1166],{"class":103},"  plugins: {\n",[86,1168,1169],{"class":88,"line":123},[86,1170,1171],{"class":103},"    cssnano: {\n",[86,1173,1174,1176,1178,1180,1182],{"class":88,"line":140},[86,1175,143],{"class":103},[86,1177,146],{"class":133},[86,1179,725],{"class":103},[86,1181,158],{"class":99},[86,1183,730],{"class":103},[86,1185,1186],{"class":88,"line":152},[86,1187,1188],{"class":103},"    }\n",[86,1190,1191],{"class":88,"line":164},[86,1192,468],{"class":103},[86,1194,1195],{"class":88,"line":173},[86,1196,194],{"class":103},[10,1198,1200],{"id":1199},"key-takeaways","Key Takeaways",[39,1202,1203,1206,1209,1212,1215,1218],{},[42,1204,1205],{},"cssnano is the safest, most configurable choice for PostCSS pipelines",[42,1207,1208],{},"lightning-css is the fastest and handles modern CSS features natively",[42,1210,1211],{},"esbuild and Parcel offer zero-config minification at build time",[42,1213,1214],{},"clean-css provides the most aggressive optimizations but needs careful testing",[42,1216,1217],{},"For Webpack, use css-minimizer-webpack-plugin and choose your backend strategically",[42,1219,1220],{},"Always benchmark minified output size and build speed for your specific project",[10,1222,1224],{"id":1223},"try-it-yourself","Try It Yourself",[15,1226,1227,1228,1233],{},"Test CSS minification results with our free ",[1229,1230,1232],"a",{"href":1231},"\u002Ftools\u002Fcss-minifier","CSS Minifier",". Paste your code, compare sizes, and see what optimizations look like in practice.",[10,1235,1237],{"id":1236},"related-guides","Related Guides",[39,1239,1240,1247,1254],{},[42,1241,1242,1246],{},[1229,1243,1245],{"href":1244},"\u002Fguides\u002Fcss-minification-guide","Why Minify CSS: Performance, File Size, and Best Practices"," — the performance case for minification",[42,1248,1249,1253],{},[1229,1250,1252],{"href":1251},"\u002Fguides\u002Fcss-compression-techniques","CSS Compression Techniques: From Comments to Shorthand"," — how each optimization technique works",[42,1255,1256,1260],{},[1229,1257,1259],{"href":1258},"\u002Fguides\u002Fhtml-minification-guide","HTML Minification Guide"," — optimize your markup alongside your styles",[1262,1263,1264],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"title":81,"searchDepth":96,"depth":96,"links":1266},[1267,1268,1273,1278,1279,1286,1290,1291,1292],{"id":12,"depth":96,"text":13},{"id":23,"depth":96,"text":24,"children":1269},[1270,1271,1272],{"id":28,"depth":117,"text":28},{"id":197,"depth":117,"text":197},{"id":317,"depth":117,"text":317},{"id":476,"depth":96,"text":477,"children":1274},[1275,1276,1277],{"id":480,"depth":117,"text":480},{"id":544,"depth":117,"text":545},{"id":605,"depth":117,"text":606},{"id":759,"depth":96,"text":760},{"id":995,"depth":96,"text":996,"children":1280},[1281,1282,1283,1284,1285],{"id":999,"depth":117,"text":1000},{"id":1012,"depth":117,"text":1013},{"id":1021,"depth":117,"text":1022},{"id":1030,"depth":117,"text":1031},{"id":1039,"depth":117,"text":1040},{"id":1052,"depth":96,"text":1053,"children":1287},[1288,1289],{"id":1056,"depth":117,"text":1057},{"id":1139,"depth":117,"text":1140},{"id":1199,"depth":96,"text":1200},{"id":1223,"depth":96,"text":1224},{"id":1236,"depth":96,"text":1237},"2026-05-28","Compare cssnano, clean-css, lightning-css, esbuild, Parcel, and Webpack css-minimizer. Find the right CSS minification tool for your project.","md",{"immutable":395},"\u002Fguides\u002Fcss-bundling-tools",{"title":5,"description":1294},"guides\u002Fcss-bundling-tools","8I5F04Cyo_U-2OsIPw98xz6HKh7sRvTj_0wj6WCZggk",1780401327058]