JavaScript Minifier

Mag-paste ng JavaScript para paliitin ito gamit ang Terser: inaalis ang dead code, pinapaikli ang mga pangalan at nawawala ang whitespace. Itinuturo ng syntax error ang eksaktong linya at column.

Tumatakbo sa browser moWalang sign-upWalang ina-upload

Minified na output

Paano gamitin ang JavaScript Minifier

  1. I-paste ang iyong JavaScript o magbukas ng .js na file.
  2. Pumili ng mga option: pinapaikli ng I-mangle ang mga pangalan ang mga local variable, isinusulat muli ng I-compress ang code sa mas maliit na katumbas, at pinapagana ng ES module ang top-level na import/export.
  3. Piliin ang ECMAScript target na suportado ng mga browser ng iyong mga user. Ligtas ang ES2020 para sa lahat ng evergreen browser.
  4. Tingnan ang laki, natipid at gzip estimate sa ilalim ng output.
  5. Kopyahin ang minified na code o i-download ito bilang output.min.js.

Ano ang ginagawa ng JavaScript minifier?

Pinapaliit ng minification ang JavaScript nang hindi binabago ang ginagawa nito. Gumagamit ang tool na ito ng Terser, ang minifier sa likod ng webpack, Vite at Rollup, at gumagawa ng tatlong uri ng pagbabago:

  • Pag-alis ng whitespace at comment: hindi kailangan ng JavaScript engine ang indentation, newline at comment.
  • Mangling: nagiging iisang letra ang mga pangalan ng local variable at function parameter gaya ng subtotal. Hindi ginagalaw ang mga global name at object property para patuloy na gumana ang iyong public API.
  • Compression: kinakalkula na ang mga constant expression, inaalis ang unreachable code, nagiging ternary ang mga if statement at ini-inline ang maiikling function.

Minify vs. gzip: kailangan mo ba pareho?

Oo. Kino-compress ng Gzip at Brotli ang mga paulit-ulit na byte pattern habang ipinapadala, samantalang inaalis ng minification ang mga byte na kailangan sanang i-download, i-parse at i-compile ng browser. Karaniwang lumiliit nang 40–60% ang isang script dahil sa minification at saka pa ng 60–70% dahil sa gzip. Magandang tantiya ng aktwal na ipapadala ng iyong server ang gzip size na ipinapakita rito.

Pagpapanatili ng license comment

Maraming open-source license (MIT, BSD, Apache) ang nag-uutos na manatili ang copyright notice kasama ng code. Ayon sa kumbensyon, pinapanatili ang mga comment na nagsisimula sa /*! o may @license o @preserve kapag naka-on ang Panatilihin ang license comment.

Kailan hindi dapat mag-minify nang mano-mano

Kung gumagamit na ng bundler ang project mo, hayaan itong mag-minify ng production build at gumawa ng source map para sa debugging. Mainam ang online minifier para sa mga one-off na script, snippet para sa CMS o tag manager, bookmarklet at pagtingin kung gaano kaliit ang kayang abutin ng isang piraso ng code.

Mga madalas itanong

Ina-upload ba sa server ang code ko?
Hindi. Tumatakbo ang Terser sa loob ng iyong browser tab, kaya hindi kailanman umaalis sa iyong computer ang proprietary code.
Puwede bang masira ng minification ang code ko?
Mga transformation lang na nagpapanatili ng parehong behavior para sa valid na JavaScript ang ginagawa ng Terser. Maaaring maapektuhan ang code na umaasa sa Function.prototype.toString() o sa pangalan ng local variable sa pamamagitan ng eval; i-off ang I-mangle ang mga pangalan sa ganoong kaso.
Sinusuportahan ba nito ang modernong syntax gaya ng async/await, class at optional chaining?
Oo. Napa-parse ng Terser ang ES2022+ na syntax. Kinokontrol lang ng target setting kung aling syntax ang puwedeng gamitin ng output; hindi nito tina-transpile pababa sa mas luma ang mga bagong feature.
Ano ang pagkakaiba ng minify at uglify?
Pareho lang ang ibig sabihin nila. Ang UglifyJS ang klasikong tool; ang Terser ang aktibong fork nito na may buong ES2015+ na suporta.

Mga kaugnay na tool