Mag-minify ng CSS _

Paano gumagana ang CSS minification

Ang minifier ay nagta-traverse ng iyong stylesheet gamit ang isang state-aware tokeniser na nagpapaiba ng mga protektadong rehiyon (string literal at url() value) mula sa nae-edit na whitespace kung saan ligtas ang pag-collapse at pag-strip.

1. Protektahan ang mga string at URL. Bago pa ang anumang iba pang transform, tinutukoy ng tokeniser ang bawat quoted string ("…" o '…') at bawat url(…) argument at iniingatan ang mga ito nang buo. Hindi kailanman nino-no-touch ng mga kasunod na pass ang mga byte na ito, kaya ang background-image URL na may espasyo o isang content property na may bantas ay napapanatili nang eksakto.
2. Alisin ang mga komento. Inaalis ang mga /* … */ block kapag naka-on ang toggle. Kung naka-on din ang license-comment toggle, nakakaligtas ang mga /*! … */ block para manatili ang mga MIT, Apache, at BSD licence header sa output ayon sa hinihingi ng mga lisensyang iyon.
3. I-collapse ang whitespace. Ang bawat run ng mga espasyo, tab, at newline ay niko-collapse sa isang espasyo, pagkatapos ay ganap na inaalis ang whitespace sa paligid ng mga CSS structural character na {, }, ;, :, at ,. Ang mga selector at value list ay nagre-reflow sa parehong paraan na binabasa ng parser ng browser.
4. I-optimise ang mga value. Ang mga opsyonal na pass ay naglo-lowercase ng hex color code, niko-collapse ng magkaparehong 6-digit na hex channel sa 3-digit shorthand (#aabbcc → #abc), at nag-aalis ng dimension unit mula sa zero value (0px → 0). Ang zero-unit pass ay lumilaktaw sa mga value sa loob ng mga transform() call kung saan mahalaga ang mga unit.
5. I-report ang byte savings. Ang parehong orihinal at minified na teksto ay sinusukat gamit ang new TextEncoder().encode(…).byteLength, ang parehong UTF-8 byte count na nakikita ng CDN o HTTP server sa wire. Ipinapakita ng metric strip ang orihinal na laki, minified na laki, bytes saved, at ang percentage saving.

Bakit mag-minify ng CSS

• Mas mabilis na render-blocking load. Hindi mag-pe-paint ang mga browser ng kahit isang pixel hanggang hindi natapos ang pag-parse ng CSS. Ang 30 porsyentong pagbawas sa stylesheet ay nagpapaikli ng block na iyon, nagpapataas ng First Contentful Paint, at direktang lumalabas sa iyong Lighthouse Performance score.
• Mas mababang CDN egress na bayad. Ang CloudFront, Cloudflare, at Fastly ay nagsi-singil bawat gigabyte ng egress. Ang pag-trim ng 20 porsyento mula sa isang stylesheet na nagsi-ship sa bawat page view ay nagiging tunay na linya sa invoice kapag lumampas ang buwanang trapiko sa ilang milyong view.
• Mas maliliit na embed at email CSS. Ang mga transactional email template ay nagla-inline ng kanilang CSS para mabuhay sa Outlook at Gmail rendering quirk, at ang bawat karagdagang byte ay nagdadala sa iyo nang mas malapit sa Gmail 102 KB clip threshold. Ang pag-minify bago mag-inline ay nagpapanatiling mababa ang mensahe.
• Walang build-tool na dependency. Ang mga mabilis na one-off job, legacy repo na walang build pipeline, at air-gapped na kapaligiran ay hindi laging may lugar para sa Node toolchain. Maaari mong patakbuhin ang pass dito nang hindi nag-i-install ng PostCSS, cssnano, o kahit ano pa.

Mga karaniwang paggamit

Ang CSS minification ay lumalabas sa dulo ng halos bawat front-end build pipeline at sa ilang runtime na konteksto kung saan mahalaga ang byte count.

• Mga production build pipeline: ang Webpack, Vite, Rollup, at Parcel ay pawang may CSS minification step sa kanilang production mode default. Ang pagpapatakbo ng pass dito bago mag-commit ay nagbibigay-daan sa iyo na ma-validate ang output nang hindi nag-ti-trigger ng buong build.
• Pag-embed ng CSS sa mga <style> tag: ang mga server-rendered framework na nagla-inline ng critical CSS sa HTML document ay nakikinabang mula sa parehong byte saving gaya ng standalone na stylesheet, at ang mas maliit na inline CSS ay nagpapababa ng Time to First Byte.
• Transactional at marketing email: ang email HTML ay nagla-inline ng lahat ng CSS, kaya ang bawat kilobyte sa stylesheet ay naidadagdag sa kabuuang laki ng mensahe. Ang pag-minify bago mag-inline ay nagpapanatili ng mga mensahe na mas mababa sa mga ESP size cap.

Isang halimbawang trabaho

Mag-paste ng 1 KB na ruleset na may two-space indentation, blank line sa pagitan ng mga selector, isang licence comment block sa itaas, at verbose na hex color tulad ng #FFFFFF at zero-padded na margin tulad ng margin: 0px. Sa lahat ng opsyon na naka-on, ang output ay nag-ko-collapse sa humigit-kumulang 600 bytes — isang 40 porsyentong pagtipid — habang ang rendered na page ay magkatulad ang hitsura sa source.

Binabago ba ng minification ang gawi ng aking CSS?

Hindi, sa mga default na toggle. Inaalis lamang ng minifier ang mga byte na itinatalbog na ng CSS parser — whitespace, komento, ang opsyonal na huling semicolon — at lumalaktaw sa loob ng transform() kung saan mahalaga ang mga unit. Napapanatili ang bawat selector, property, at value.

Gumagana ba ito sa SCSS o LESS?

Pagkatapos lamang mong i-compile ang mga ito sa plain CSS. Ang SCSS at LESS syntax (variable, nesting, mixin, & parent selector) ay hindi valid na CSS at mababasag ito ng minifier. I-compile muna ang iyong preprocessor source, pagkatapos ay i-paste dito ang compiled output.

Bakit natinatanggal ang aking mga licence comment?

Naka-on ang "Alisin ang mga komento" bilang default at nililinis ang bawat /* … */ block. I-enable ang "Panatilihin ang /*! licence comments" para mapanatili ang mga block na nagsisimula sa /*!. Lahat ng MIT, Apache, at BSD ay nangangailangan na ang copyright header ay isama sa nire-redistribute na CSS.

Magkano ang maaari kong matipid?

Ang hand-authored na CSS ay karaniwang bumababa ng 15 hanggang 35 porsyento. Ang mga file na may maraming komento o malalim na indentation na may maraming color literal ay maaaring umabot sa 40 porsyento. Ang compiled output mula sa Sass o CSS-in-JS ay madalas na partly minified na at nakatitipid ng mas kaunti — karaniwang 5 hanggang 15 porsyento.

Patakbuhin ang CSS minification sa isang browser tab at ganap na nila-laktawan ang Node toolchain. I-paste ang stylesheet sa itaas, i-toggle ang mga opsyon ayon sa kung gaano kasala ang gusto mong gawin ng pass, pagkatapos ay kopyahin ang output o i-download ito bilang .min.css. Walang upload, walang account, walang vendor library.