[{"data":1,"prerenderedAt":817},["ShallowReactive",2],{"guide-js-minification-guide":3},{"id":4,"title":5,"body":6,"date":809,"description":810,"extension":811,"meta":812,"navigation":161,"path":813,"readingTime":158,"seo":814,"stem":815,"__hash__":816},"guides\u002Fguides\u002Fjs-minification-guide.md","JavaScript Minification Guide: How It Works and Why It Matters",{"type":7,"value":8,"toc":793},"minimark",[9,14,18,21,25,28,33,36,61,205,208,212,215,238,278,281,285,319,323,326,337,408,411,434,438,441,539,551,556,562,566,573,637,652,655,659,662,688,691,695,729,733,750,754,762,766,789],[10,11,13],"h2",{"id":12},"what-is-javascript-minification","What Is JavaScript Minification?",[15,16,17],"p",{},"JavaScript minification transforms your source code into a smaller version that runs identically. It strips characters the JavaScript engine does not need — whitespace, comments, line breaks, and block delimiters — and often shortens variable names to single letters.",[15,19,20],{},"A typical minification pass cuts file size by 30–60%. For a 100 KB script, that could mean 40–60 KB less data traveling over the network.",[10,22,24],{"id":23},"how-minification-works","How Minification Works",[15,26,27],{},"Minification operates in two distinct stages. Understanding both helps you choose the right tool and interpret the output correctly.",[29,30,32],"h3",{"id":31},"stage-1-whitespace-and-comment-removal","Stage 1: Whitespace and Comment Removal",[15,34,35],{},"The minifier removes everything the parser ignores:",[37,38,39,43,55,58],"ul",{},[40,41,42],"li",{},"Line breaks and indentation",[40,44,45,46,50,51,54],{},"Single-line (",[47,48,49],"code",{},"\u002F\u002F",") and multi-line (",[47,52,53],{},"\u002F* *\u002F",") comments",[40,56,57],{},"Trailing semicolons where safe",[40,59,60],{},"Unnecessary parentheses",[62,63,68],"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Before (148 bytes)\nfunction calculateTotal(price, tax) {\n  \u002F\u002F Apply tax rate\n  const total = price + (price * tax);\n  return total;\n}\n\n\u002F\u002F After (46 bytes)\nfunction calculateTotal(a,b){return a+a*b}\n","javascript","",[47,69,70,79,107,113,141,150,156,163,169],{"__ignoreMap":67},[71,72,75],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"sJ8bj","\u002F\u002F Before (148 bytes)\n",[71,80,82,86,90,94,98,101,104],{"class":73,"line":81},2,[71,83,85],{"class":84},"szBVR","function",[71,87,89],{"class":88},"sScJk"," calculateTotal",[71,91,93],{"class":92},"sVt8B","(",[71,95,97],{"class":96},"s4XuR","price",[71,99,100],{"class":92},", ",[71,102,103],{"class":96},"tax",[71,105,106],{"class":92},") {\n",[71,108,110],{"class":73,"line":109},3,[71,111,112],{"class":77},"  \u002F\u002F Apply tax rate\n",[71,114,116,119,123,126,129,132,135,138],{"class":73,"line":115},4,[71,117,118],{"class":84},"  const",[71,120,122],{"class":121},"sj4cs"," total",[71,124,125],{"class":84}," =",[71,127,128],{"class":92}," price ",[71,130,131],{"class":84},"+",[71,133,134],{"class":92}," (price ",[71,136,137],{"class":84},"*",[71,139,140],{"class":92}," tax);\n",[71,142,144,147],{"class":73,"line":143},5,[71,145,146],{"class":84},"  return",[71,148,149],{"class":92}," total;\n",[71,151,153],{"class":73,"line":152},6,[71,154,155],{"class":92},"}\n",[71,157,159],{"class":73,"line":158},7,[71,160,162],{"emptyLinePlaceholder":161},true,"\n",[71,164,166],{"class":73,"line":165},8,[71,167,168],{"class":77},"\u002F\u002F After (46 bytes)\n",[71,170,172,174,176,178,181,184,187,190,193,196,198,200,202],{"class":73,"line":171},9,[71,173,85],{"class":84},[71,175,89],{"class":88},[71,177,93],{"class":92},[71,179,180],{"class":96},"a",[71,182,183],{"class":92},",",[71,185,186],{"class":96},"b",[71,188,189],{"class":92},"){",[71,191,192],{"class":84},"return",[71,194,195],{"class":92}," a",[71,197,131],{"class":84},[71,199,180],{"class":92},[71,201,137],{"class":84},[71,203,204],{"class":92},"b}\n",[15,206,207],{},"This stage alone typically removes 20–40% of file size. The logic and variable names stay intact, so the code remains readable if you need to debug.",[29,209,211],{"id":210},"stage-2-variable-and-function-mangling","Stage 2: Variable and Function Mangling",[15,213,214],{},"Mangling (also called name shortening) replaces local variable and function names with shorter identifiers:",[37,216,217,225,231],{},[40,218,219,222,223],{},[47,220,221],{},"calculateTotal"," → ",[47,224,180],{},[40,226,227,222,229],{},[47,228,97],{},[47,230,186],{},[40,232,233,222,235],{},[47,234,103],{},[47,236,237],{},"c",[62,239,241],{"className":64,"code":240,"language":66,"meta":67,"style":67},"\u002F\u002F After mangling (34 bytes)\nfunction a(b,c){return b+b*c}\n",[47,242,243,248],{"__ignoreMap":67},[71,244,245],{"class":73,"line":74},[71,246,247],{"class":77},"\u002F\u002F After mangling (34 bytes)\n",[71,249,250,252,254,256,258,260,262,264,266,269,271,273,275],{"class":73,"line":81},[71,251,85],{"class":84},[71,253,195],{"class":88},[71,255,93],{"class":92},[71,257,186],{"class":96},[71,259,183],{"class":92},[71,261,237],{"class":96},[71,263,189],{"class":92},[71,265,192],{"class":84},[71,267,268],{"class":92}," b",[71,270,131],{"class":84},[71,272,186],{"class":92},[71,274,137],{"class":84},[71,276,277],{"class":92},"c}\n",[15,279,280],{},"Mangling adds another 10–20% reduction on top of whitespace removal. However, it makes the output unreadable — which is the point. Production code does not need to be human-friendly.",[29,282,284],{"id":283},"what-minifiers-do-not-change","What Minifiers Do NOT Change",[37,286,287,301,307,313],{},[40,288,289,293,294,100,297,300],{},[290,291,292],"strong",{},"API names",": ",[47,295,296],{},"document.querySelector",[47,298,299],{},"Array.prototype.map",", and all built-in methods stay intact",[40,302,303,306],{},[290,304,305],{},"Global variables",": Anything accessible from other scripts cannot be renamed",[40,308,309,312],{},[290,310,311],{},"String literals",": Text inside quotes is never modified",[40,314,315,318],{},[290,316,317],{},"Object property names",": Keys accessed via dot notation remain unchanged unless the minifier can prove they are safe to rename",[10,320,322],{"id":321},"source-maps-debugging-minified-code","Source Maps: Debugging Minified Code",[15,324,325],{},"When an error occurs in production, the stack trace points to line 1, column 1847 of a single-line file. Without a source map, you have no idea where the problem originated.",[15,327,328,329,332,333,336],{},"A ",[290,330,331],{},"source map"," is a separate ",[47,334,335],{},".map"," file that maps each position in the minified output back to the original source. Modern browsers load source maps automatically when DevTools is open, showing you the original file names and line numbers.",[62,338,342],{"className":339,"code":340,"language":341,"meta":67,"style":67},"language-json shiki shiki-themes github-light github-dark","{\n  \"version\": 3,\n  \"file\": \"app.min.js\",\n  \"sources\": [\"app.js\", \"utils.js\"],\n  \"mappings\": \"AAAA,SAASA...\"\n}\n","json",[47,343,344,349,362,375,394,404],{"__ignoreMap":67},[71,345,346],{"class":73,"line":74},[71,347,348],{"class":92},"{\n",[71,350,351,354,356,359],{"class":73,"line":81},[71,352,353],{"class":121},"  \"version\"",[71,355,293],{"class":92},[71,357,358],{"class":121},"3",[71,360,361],{"class":92},",\n",[71,363,364,367,369,373],{"class":73,"line":109},[71,365,366],{"class":121},"  \"file\"",[71,368,293],{"class":92},[71,370,372],{"class":371},"sZZnC","\"app.min.js\"",[71,374,361],{"class":92},[71,376,377,380,383,386,388,391],{"class":73,"line":115},[71,378,379],{"class":121},"  \"sources\"",[71,381,382],{"class":92},": [",[71,384,385],{"class":371},"\"app.js\"",[71,387,100],{"class":92},[71,389,390],{"class":371},"\"utils.js\"",[71,392,393],{"class":92},"],\n",[71,395,396,399,401],{"class":73,"line":143},[71,397,398],{"class":121},"  \"mappings\"",[71,400,293],{"class":92},[71,402,403],{"class":371},"\"AAAA,SAASA...\"\n",[71,405,406],{"class":73,"line":152},[71,407,155],{"class":92},[15,409,410],{},"Best practices for source maps:",[37,412,413,419,428],{},[40,414,415,418],{},[290,416,417],{},"Generate them during every production build"," — do not skip this step",[40,420,421,427],{},[290,422,423,424,426],{},"Do not deploy ",[47,425,335],{}," files to public servers"," — serve them internally or upload to error-tracking services",[40,429,430,433],{},[290,431,432],{},"Configure error monitoring tools"," (Sentry, Bugsnag) to consume source maps for readable stack traces",[10,435,437],{"id":436},"terser-vs-uglifyjs","Terser vs UglifyJS",[15,439,440],{},"Two tools dominate JavaScript minification. Here is how they compare:",[442,443,444,460],"table",{},[445,446,447],"thead",{},[448,449,450,454,457],"tr",{},[451,452,453],"th",{},"Feature",[451,455,456],{},"UglifyJS",[451,458,459],{},"Terser",[461,462,463,477,490,503,515,526],"tbody",{},[448,464,465,471,474],{},[466,467,468],"td",{},[290,469,470],{},"ES6+ support",[466,472,473],{},"Partial",[466,475,476],{},"Full",[448,478,479,484,487],{},[466,480,481],{},[290,482,483],{},"Active maintenance",[466,485,486],{},"Minimal",[466,488,489],{},"Active",[448,491,492,497,500],{},[466,493,494],{},[290,495,496],{},"Mangling",[466,498,499],{},"Yes",[466,501,502],{},"Yes (more options)",[448,504,505,510,513],{},[466,506,507],{},[290,508,509],{},"Tree shaking hints",[466,511,512],{},"No",[466,514,499],{},[448,516,517,522,524],{},[466,518,519],{},[290,520,521],{},"Source maps",[466,523,499],{},[466,525,499],{},[448,527,528,533,536],{},[466,529,530],{},[290,531,532],{},"Compress toggles",[466,534,535],{},"Basic",[466,537,538],{},"Granular",[15,540,541,543,544,100,547,550],{},[290,542,456],{}," was the standard for years but has largely stagnated. It does not fully support ES6+ syntax — code using ",[47,545,546],{},"const",[47,548,549],{},"let",", arrow functions, or template literals may require transpilation first.",[15,552,553,555],{},[290,554,459],{}," forked from UglifyJS in 2018 and now receives regular updates. It handles modern JavaScript natively and offers finer control over compression passes.",[15,557,558,561],{},[290,559,560],{},"Recommendation",": Use Terser unless you have a legacy ES5-only codebase with an existing UglifyJS setup. Most bundlers (Webpack, Vite, Rollup) default to Terser or use it under the hood.",[10,563,565],{"id":564},"development-vs-production","Development vs Production",[15,567,568,569,572],{},"Minification belongs in the ",[290,570,571],{},"production build only",". During development, you need readable code, accurate line numbers, and fast rebuilds.",[442,574,575,587],{},[445,576,577],{},[448,578,579,581,584],{},[451,580],{},[451,582,583],{},"Development",[451,585,586],{},"Production",[461,588,589,602,614,624],{},[448,590,591,596,599],{},[466,592,593],{},[290,594,595],{},"Minification",[466,597,598],{},"Off",[466,600,601],{},"On",[448,603,604,608,611],{},[466,605,606],{},[290,607,521],{},[466,609,610],{},"cheap-module-source-map",[466,612,613],{},"hidden-source-map",[448,615,616,620,622],{},[466,617,618],{},[290,619,496],{},[466,621,598],{},[466,623,601],{},[448,625,626,631,634],{},[466,627,628],{},[290,629,630],{},"Comments",[466,632,633],{},"Preserved",[466,635,636],{},"Stripped",[15,638,639,640,643,644,647,648,651],{},"Most bundlers make this easy. In Vite, minification is automatic for ",[47,641,642],{},"build"," mode and skipped for ",[47,645,646],{},"serve"," mode. In Webpack, ",[47,649,650],{},"mode: 'production'"," enables Terser by default.",[15,653,654],{},"Never debug minified code directly — rely on source maps instead. And never ship development builds to production; the size difference can be 2–3×.",[10,656,658],{"id":657},"performance-impact","Performance Impact",[15,660,661],{},"Minification is not just about disk space. Smaller files mean:",[37,663,664,670,676,682],{},[40,665,666,669],{},[290,667,668],{},"Faster download"," — especially on mobile networks where every kilobyte counts",[40,671,672,675],{},[290,673,674],{},"Faster parse and compile"," — the JavaScript engine processes fewer tokens",[40,677,678,681],{},[290,679,680],{},"Lower memory usage"," — shorter identifier names reduce heap allocation",[40,683,684,687],{},[290,685,686],{},"Better cache efficiency"," — smaller files fit more easily into caching layers",[15,689,690],{},"For a site loading 500 KB of JavaScript, minification alone can shave 200–300 KB. Combined with compression (gzip or Brotli), the total savings often exceed 70%.",[10,692,694],{"id":693},"common-mistakes","Common Mistakes",[37,696,697,703,709,723],{},[40,698,699,702],{},[290,700,701],{},"Minifying server-side code"," — Node.js does not benefit from minified files; disk space is cheap, and debugging is hard",[40,704,705,708],{},[290,706,707],{},"Forgetting to generate source maps"," — you will regret this the moment a production bug appears",[40,710,711,714,715,718,719,722],{},[290,712,713],{},"Relying on variable names for logic"," — if your code depends on ",[47,716,717],{},"constructor.name"," or ",[47,720,721],{},"Function.prototype.toString",", mangling will break it",[40,724,725,728],{},[290,726,727],{},"Minifying without testing"," — always run your test suite against the minified build before deploying",[10,730,732],{"id":731},"key-takeaways","Key Takeaways",[37,734,735,738,741,744,747],{},[40,736,737],{},"Minification combines whitespace removal and variable mangling to cut JavaScript size by 30–60%",[40,739,740],{},"Always generate source maps and keep them accessible for debugging production errors",[40,742,743],{},"Use Terser over UglifyJS for modern ES6+ codebases",[40,745,746],{},"Minify only in production builds — development needs readable code",[40,748,749],{},"Pair minification with gzip\u002FBrotli compression for maximum savings",[10,751,753],{"id":752},"try-it-yourself","Try It Yourself",[15,755,756,757,761],{},"See minification in action with our free ",[180,758,760],{"href":759},"\u002Ftools\u002Fjs-minifier","JavaScript Minifier",". Paste your code, compare the before and after, and check the size savings — all in your browser with no data sent to any server.",[10,763,765],{"id":764},"related-guides","Related Guides",[37,767,768,775,782],{},[40,769,770,774],{},[180,771,773],{"href":772},"\u002Fguides\u002Fjs-tree-shaking","Tree Shaking vs Minification"," — How dead code elimination complements minification for even smaller bundles",[40,776,777,781],{},[180,778,780],{"href":779},"\u002Fguides\u002Fjs-performance-optimization","JavaScript Performance Optimization"," — Strategies for faster loading, parsing, and executing JavaScript",[40,783,784,788],{},[180,785,787],{"href":786},"\u002Fguides\u002Fcss-minification-guide","CSS Minification Guide"," — Apply the same size-reduction principles to your stylesheets",[790,791,792],"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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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}",{"title":67,"searchDepth":81,"depth":81,"links":794},[795,796,801,802,803,804,805,806,807,808],{"id":12,"depth":81,"text":13},{"id":23,"depth":81,"text":24,"children":797},[798,799,800],{"id":31,"depth":109,"text":32},{"id":210,"depth":109,"text":211},{"id":283,"depth":109,"text":284},{"id":321,"depth":81,"text":322},{"id":436,"depth":81,"text":437},{"id":564,"depth":81,"text":565},{"id":657,"depth":81,"text":658},{"id":693,"depth":81,"text":694},{"id":731,"depth":81,"text":732},{"id":752,"depth":81,"text":753},{"id":764,"depth":81,"text":765},"2026-05-28","Learn how JavaScript minification reduces file size by stripping whitespace, removing comments, and shortening variable names for faster pages.","md",{"immutable":161},"\u002Fguides\u002Fjs-minification-guide",{"title":5,"description":810},"guides\u002Fjs-minification-guide","XkozscXJfDAzraGMcqMaJLYu7paBJobcTm1dzT4JS3E",1780401327104]