Initializing, please wait a moment

Trinh Rut Gon CSS vs Uglifier vs Tree-Shaking

Cap nhat lan cuoi: 2026-04-27. Mo trinh rut gon CSS de rut gon trong trinh duyet ma khong tai len ma nguon.

Dap an 30 giay. Ba ky thuat giam kich thuoc khac nhau nham cung muc tieu nhung lam viec tren cac lop khac nhau. Trinh rut gon xoa khoang trang va chu thich. Uglifier doi ten cac ky hieu (bien, ten ham) thanh dang ngan hon. Tree-shaking loai bo ma ma phan con lai cua bundle khong bao gio dung. Chung xep chong: mot bundle da rut gon-va-uglify da tree-shake nho hon bat ky ky thuat don le nao.

Trinh rut gon - khoang trang va chu thich

Chien thuat don gian nhat: lay 10 KB CSS hoac JS co dinh dang va xoa moi khoang trang, dong moi, va chu thich khong anh huong den parsing. Dau ra hoat dong giong het dau vao nhung chiem it hon 30-50% khong gian. Day la cai trinh rut gon CSS lam cho stylesheet.

Cac trinh rut gon CSS hien dai di xa hon khoang trang: gop 0px thanh 0, thay #ffffff bang #fff, xoa gia tri mac dinh du thua, gop cac bo chon ke co cung luat. Moi cai cao mot phan tram nho; hieu ung tich luy co y nghia.

Uglifier - doi ten de tiet kiem byte

Dac trung cho JavaScript. Lay const calculateMonthlyTotal = ... va doi ten thanh const a = .... Ten ngan hon nho hon. Lap lai tren hang nghin dinh danh, tiet kiem cong don.

Uglifier yeu cau hieu quy tac pham vi cua ma - ban co the doi ten bien cuc bo tu do, nhung doi ten mot bien toan cuc pha vo bat cu gi phu thuoc vao ten. Cac cong cu nhu Terser, esbuild, va SWC lam dieu nay an toan bang cach phan tich do thi pham vi.

Cho CSS, tuong duong la doi ten lop. Cac pipeline build hash lop CSS thanh .a, .b, .c tiet kiem byte theo cung cach - nhung chi hoat dong khi HTML duoc dung bang cung pipeline de cac tham chieu khop.

Tree-shaking - xoa cai khong ai dung

Cai lon. Khi ban nhap mot thu vien va dung mot ham trong nam muoi, bundling ngay tho gui tat ca nam muoi. Tree-shaking phan tich do thi nhap va chi bao gom cac ham thuc su duoc goi boi diem vao cua app. Bon muoi chin ham bien mat khoi bundle dau ra.

Tree-shaking yeu cau ma nguon o dinh dang ho tro phan tich - module ES goc ("import" / "export") thay vi CommonJS ("require"). Tac gia thu vien da danh nhieu nam di chuyen sang ESM cu the de lam tree-shaking hieu qua cho nguoi tieu dung cua ho.

Cho CSS, tree-shaking co mot song song goi la PurgeCSS hay che do JIT cua TailwindCSS: quet HTML va chi bao gom luat CSS khop ten lop thuc trong markup. Tailwind gui hang nghin lop tien ich; build production chi bao gom nhung cai dang dung.

Cai nao dung truoc

Dung ca ba khi pipeline build ho tro chung. Thu tu: tree-shake truoc (loai bo cac mang lon nhat), sau do rut gon va uglify ket qua. Bundler hien dai (Vite, esbuild, Rollup, Webpack 5+) lam ca ba trong mot luot voi mot co cau hinh duy nhat.

Cho du an khong-bundle noi ban chi muon stylesheet nho hon, chay trinh rut gon CSS tren CSS cuoi. Cho noi dung rong hon ve cac ky thuat nay, xem trinh rut gon CSS vs trinh nen hay cach rut gon CSS va JS cho Cloud Run cold start. Bo day du: hub cong cu lap trinh vien.

Why trust these tools

  • Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
  • Truly in-browser - no upload. Every file-processing tool on this site runs in your browser through modern Web APIs (File, FileReader, Canvas, Web Audio, WebGL, Web Workers). Your photo, PDF, audio, or text never leaves your device.
  • No tracking during tool use. Analytics ends at the page view. The actual input you paste, drop, or capture is never sent to any server and never written to any log.
  • Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
  • Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.