-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjs-minifier.html
More file actions
818 lines (743 loc) · 52.7 KB
/
Copy pathjs-minifier.html
File metadata and controls
818 lines (743 loc) · 52.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Minifier & Beautifier Online | FreeDevTool</title>
<meta name="description" content="Free JavaScript minifier & beautifier — 30–60% bundle size reduction, faster TTI, better INP. Mangling, dead code elimination. Browser-only.">
<meta name="robots" content="index, follow">
<meta name="author" content="Anees Ur Rehman">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","datePublished":"2026-05-02","dateModified":"2026-05-19","inLanguage":"en-US","isPartOf":{"@type":"WebSite","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","name":"Anees Ur Rehman","url":"https://freedevtool.org/about","jobTitle":"Full-stack developer","worksFor":{"@type":"Organization","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<link rel="canonical" href="https://freedevtool.org/js-minifier">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap">
<link rel="preload" href="style.css?v=20260502-cards" as="style">
<link rel="stylesheet" href="style.css?v=20260502-cards">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon.svg">
<meta property="og:image" content="https://freedevtool.org/og-image.svg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="FreeDevTool — 50+ free, fast, privacy-first developer tools">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://freedevtool.org/og-image.svg">
<meta name="twitter:title" content="JavaScript Minifier & Beautifier — Free | FreeDevTool">
<meta name="twitter:description" content="Compress JS for production, beautify minified code. Boost TTI & INP. Runs in browser, no signup, no uploads.">
<meta property="og:image" content="https://freedevtool.org/og-image.svg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:image" content="https://freedevtool.org/og-image.svg">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3L0CMH3X36"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-3L0CMH3X36');</script>
<meta property="og:title" content="JavaScript Minifier & Beautifier — Compress JS Online Free">
<meta property="og:description" content="Minify JS for faster page loads or beautify minified code. Improve Time to Interactive.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://freedevtool.org/js-minifier">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebApplication","name":"JavaScript Minifier & Beautifier","url":"https://freedevtool.org/js-minifier","description":"Minify JavaScript to reduce file size or beautify minified JS. Free online tool.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to minify or beautify JavaScript online",
"description": "Compress JS bundles for production or beautify minified JS for inspection — entirely client-side via WebAssembly.",
"step": [
{"@type":"HowToStep","name":"Paste JavaScript","text":"Paste source or minified JavaScript into the input textarea. Source code never leaves the browser."},
{"@type":"HowToStep","name":"Choose direction","text":"Click Minify to compress for production, or Beautify to format minified code for reading and debugging."},
{"@type":"HowToStep","name":"Review the size diff","text":"Original size, minified size, and gzip estimate display in real time. Confirm the reduction is meaningful before deploy."},
{"@type":"HowToStep","name":"Copy or download","text":"Copy the output to clipboard for paste into your build pipeline, or download as a .min.js file."}
]
}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[
{"@type":"Question","name":"What does minifying JavaScript do?","acceptedAnswer":{"@type":"Answer","text":"JavaScript minification removes unnecessary characters from source code — whitespace, line breaks, comments, and sometimes shortens variable names — without changing functionality. This reduces file size, leading to faster downloads and quicker script parsing. Smaller JS bundles directly improve Time to Interactive (TTI) and Total Blocking Time (TBT)."}},
{"@type":"Question","name":"How much does JS minification improve page speed?","acceptedAnswer":{"@type":"Answer","text":"Minification typically reduces JavaScript file size by 20-40%. Combined with gzip/brotli compression, total transfer size can drop by 60-80%. The impact on page speed depends on the original file size — a 200KB unminified file becoming 120KB minified can save 50-200ms on 3G connections."}},
{"@type":"Question","name":"What is the difference between minification and obfuscation?","acceptedAnswer":{"@type":"Answer","text":"Minification removes unnecessary characters to reduce file size while keeping code functionally identical. Obfuscation deliberately makes code hard to understand by renaming variables, adding dead code, and transforming logic — primarily for intellectual property protection. Minification is a performance optimization; obfuscation is a security measure. Both reduce readability."}},
{"@type":"Question","name":"Does minifying JS affect Core Web Vitals and SEO?","acceptedAnswer":{"@type":"Answer","text":"Yes. JavaScript is often render-blocking or parser-blocking. Smaller JS files download and parse faster, improving Time to Interactive (TTI), Total Blocking Time (TBT), and Interaction to Next Paint (INP). Google uses Core Web Vitals as ranking signals, making JS minification a direct SEO optimization."}},
{"@type":"Question","name":"What is tree shaking vs minification?","acceptedAnswer":{"@type":"Answer","text":"Tree shaking removes unused code (dead code elimination) from your bundle at build time — for example, importing only one function from lodash instead of the entire library. Minification compresses the remaining code by removing whitespace and comments. They work together: tree shake first to remove unused code, then minify what's left."}},{"@type":"Question","name":"Is online JS minification safe for production code?","acceptedAnswer":{"@type":"Answer","text":"Browser-based minifiers are safe — your code never leaves your machine. For production builds, prefer a build-time minifier (esbuild, swc, Terser) for source map integration, bundling integration, and automated test integration against minified output."}},{"@type":"Question","name":"Should I minify in development or only production?","acceptedAnswer":{"@type":"Answer","text":"Production only. In development you want fast incremental builds and readable stack traces. Minification slows the build and obscures source. Use a build mode flag (NODE_ENV production) to enable minification only on production deployments."}},{"@type":"Question","name":"What is dead code elimination in JS minification?","acceptedAnswer":{"@type":"Answer","text":"Dead code elimination (DCE) removes code paths that can never execute — unreachable branches, functions never called, imports never used. Combined with tree-shaking, DCE can reduce bundle size by 30-50% on large codebases. Whitespace-only minifiers do not do DCE."}}
]}
</script>
<style>
.size-stats { display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; }
.size-stat { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; font-family:var(--mono); font-size:12px; text-align:center; min-width:100px; }
.size-stat-label { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.size-stat-val { font-size:16px; font-weight:600; }
.size-stat-val.green { color:var(--accent); }
.char-count { font-family:var(--mono); font-size:11px; color:var(--text3); text-align:right; margin-top:4px; }
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://freedevtool.org/"
},
{
"@type": "ListItem",
"position": 2,
"name": "All Tools",
"item": "https://freedevtool.org/all-tools"
},
{
"@type": "ListItem",
"position": 3,
"name": "JavaScript Minifier & Beautifier",
"item": "https://freedevtool.org/js-minifier"
}
]
}
</script>
<script src="/ga4-events.js" defer></script>
</head>
<body>
<nav>
<a class="nav-logo" href="/" aria-label="FreeDevTool home"><svg class="logo-mark" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true" fill="none"><rect x="1" y="1" width="22" height="22" rx="6" fill="currentColor" opacity=".12"/><path d="M9.5 8.5L6 12l3.5 3.5M14.5 8.5L18 12l-3.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>FreeDevTool</a>
<div class="nav-links">
<div class="nav-dropdown" id="tools-dropdown">
<a href="all-tools" onclick="event.preventDefault();this.parentElement.classList.toggle('open')" aria-haspopup="true">Tools <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></a>
<div class="nav-dropdown-menu">
<a href="encoding-tools">
<div class="dd-icon">b64</div>
<div class="dd-info"><div class="dd-name">Encoding & Conversion</div><div class="dd-count">11 tools · Base64, YAML, px→rem</div></div>
</a>
<a href="generation-tools">
<div class="dd-icon">{ }</div>
<div class="dd-info"><div class="dd-name">Generation & Formatting</div><div class="dd-count">16 tools · JSON, SQL, gradients</div></div>
</a>
<a href="security-tools">
<div class="dd-icon">#</div>
<div class="dd-info"><div class="dd-name">Security & Hashing</div><div class="dd-count">3 tools · JWT, MD5, SHA</div></div>
</a>
<a href="text-tools">
<div class="dd-icon">.*</div>
<div class="dd-info"><div class="dd-name">Code & Text Tools</div><div class="dd-count">9 tools · Regex, diff, tokens</div></div>
</a>
<a href="devops-tools">
<div class="dd-icon">JS</div>
<div class="dd-info"><div class="dd-name">Optimization & DevOps</div><div class="dd-count">7 tools · Minifiers, cURL, git</div></div>
</a>
<a href="network-tools">
<div class="dd-icon">IP</div>
<div class="dd-info"><div class="dd-name">Network & Time</div><div class="dd-count">4 tools · IP, DNS, timestamps</div></div>
</a>
<a href="seo-tools">
<div class="dd-icon">SEO</div>
<div class="dd-info"><div class="dd-name">SEO & Meta Tools</div><div class="dd-count">3 tools · OG, meta, slug</div></div>
</a>
<div class="nav-dropdown-divider"></div>
<a class="dd-all" href="all-tools">
<div class="dd-icon">All</div>
<div class="dd-info"><div class="dd-name">Browse all 50 tools</div><div class="dd-count">Searchable catalog & categories</div></div>
</a>
</div>
</div>
<a href="/guides">Guides</a>
<a href="about">About</a>
<a href="privacy">Privacy</a>
</div>
</nav>
<div id="copy-toast">Copied!</div>
<div class="wrapper">
<a class="tool-back" href="/" aria-label="Back to home">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
Back
</a>
<div class="tool-header">
<div class="tool-badge">Optimization Tool</div>
<h1>JavaScript Minifier & Beautifier Online</h1>
<p class="tool-description">
Minify JavaScript to reduce bundle size for production, or beautify minified JS for debugging. This free JS minifier strips whitespace, comments, and dead code to cut bundles by 30–60%. Smaller bundles improve <strong>Time to Interactive (TTI)</strong>, <strong>Total Blocking Time (TBT)</strong>, and <strong>Interaction to Next Paint (INP)</strong> — all <a href="https://web.dev/articles/vitals" rel="noopener" style="color:var(--accent)">Core Web Vitals</a> ranking factors in 2026. All processing runs in your browser; code never leaves your machine.
</p>
<div class="last-updated">Last updated: May 2026 · Written by <a href="/about">Anees Ur Rehman</a>, full-stack developer</div>
</div>
<div class="tool-card">
<div class="tool-card-header">
<div class="dot dot-red"></div><div class="dot dot-yellow"></div><div class="dot dot-green"></div>
<span class="tool-card-title">js-minifier.tool</span>
</div>
<div class="tool-body">
<div class="tabs">
<button class="tab active" onclick="setMode('minify',this)">Minify</button>
<button class="tab" onclick="setMode('beautify',this)">Beautify</button>
</div>
<label>Paste your JavaScript</label>
<textarea id="js-input" placeholder="// Example function
function greet(name) {
/* Say hello */
const message = 'Hello, ' + name + '!';
console.log(message);
return message;
}
// Call it
greet('World');" oninput="process()" rows="8"></textarea>
<div class="char-count" id="input-count">0 characters</div>
<div class="divider"></div>
<div class="output-label">
<label style="margin:0" id="output-label-text">Minified JavaScript</label>
<button class="btn btn-ghost" onclick="copyOutput()">Copy</button>
</div>
<div class="output-block" id="js-output" style="color:var(--text2);font-style:italic;max-height:300px;overflow:auto">Output will appear here...</div>
<div class="size-stats" id="size-stats" style="display:none">
<div class="size-stat"><div class="size-stat-label">Original</div><div class="size-stat-val" id="stat-original">0 B</div></div>
<div class="size-stat"><div class="size-stat-label">Output</div><div class="size-stat-val" id="stat-output">0 B</div></div>
<div class="size-stat"><div class="size-stat-label">Saved</div><div class="size-stat-val green" id="stat-saved">0%</div></div>
</div>
</div>
</div>
<!-- =============================================================
LONG-FORM ARTICLE — comprehensive guide for E-E-A-T + ranking.
============================================================= -->
<article>
<p class="aeo-lead" style="font-size:16px;line-height:1.7;color:var(--text);max-width:760px;margin:24px auto 18px;padding:0 4px">
<strong>JavaScript minification</strong> removes whitespace, comments, and shortens variable names to reduce bundle size — typical savings are 30-40% before gzip. This <strong>free JS minifier</strong> performs whitespace removal and basic shortening — not full AST-based minification like Terser or esbuild. Use it for quick one-off compression; use a build pipeline (Terser, esbuild, swc) for production.
</p>
<section id="examples" style="max-width:760px;margin:24px auto 32px">
<h2 style="font-size:18px;margin-bottom:14px">Examples</h2>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Typical savings§§React production bundle (300 KB) → ~200 KB after esbuild minification (33% smaller).§§After gzip the difference shrinks to ~10%, but parse-time savings remain.</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Mangling identifiers§§function calculateUserBalance(userId) → function a(b) — saves bytes and CPU parse time. Use sourcemaps to debug minified production code.</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Production-only§§Minify only for production builds — never minified code in development. Source maps are essential for any minified JS that ships to production, so errors map back to original lines.</strong>
</div>
</section>
<aside class="founder-note" style="max-width:760px;margin:24px auto 32px;padding:20px 24px;background:rgba(0,208,132,0.05);border-left:3px solid var(--accent);border-radius:6px;font-size:14px;line-height:1.7;color:var(--text2)"><div style="font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;font-weight:600">💡 Why I built this</div><p style="margin:0 0 12px">I built this for quick one-off minification — when you need to reduce a 50-line script before pasting into a constrained inline-script context, but spinning up esbuild or terser is overkill. This minifier does whitespace removal and basic shortening (not full AST-based minification — that is terser’s territory). For production builds use a real build tool; for quick wins this is faster.</p><p style="margin:0;font-size:13px;color:var(--text3)">— <a href="/about" style="color:var(--accent);text-decoration:none">Anees Ur Rehman</a>, full-stack developer</p></aside>
<section class="article-section">
<h2>What is JavaScript minification?</h2>
<p><strong>JavaScript minification</strong> is the process of transforming your readable JS source into a functionally identical but byte-smaller version — by stripping whitespace, comments, renaming local variables to single letters, eliminating dead code, and applying compiler-like optimizations. A 200 KB hand-written file typically minifies to 60–90 KB. Combined with gzip/Brotli compression, a 200 KB source can ship as 18–25 KB over the wire.</p>
<p>Minification is the single biggest performance lever for JavaScript-heavy sites. JavaScript is <strong>parsed, compiled, and executed</strong> on the main thread — bigger bundles mean longer parse times, longer compile times, longer time before the page becomes interactive. Google's Core Web Vitals (specifically <strong>INP</strong>, <strong>TTI</strong>, <strong>TBT</strong>) all penalize bloated JS. Lighthouse flags "minify JavaScript" as a high-impact opportunity, and PageSpeed Insights shows estimated savings.</p>
<p>Three practical wins from minification:</p>
<ul>
<li><strong>Smaller download</strong> — cuts bytes-over-wire by 30–60% (before gzip), 5–15% incremental win after gzip.</li>
<li><strong>Faster parse + compile</strong> — V8 / SpiderMonkey / JavaScriptCore parse minified code faster because there's less text to tokenize.</li>
<li><strong>Smaller cache footprint</strong> — important on low-storage mobile devices where the HTTP cache evicts assets aggressively.</li>
</ul>
</section>
<section class="article-section">
<h2>Minification vs uglification vs obfuscation</h2>
<p>These three terms are often confused. They overlap but mean different things in 2026:</p>
<table class="ref-table">
<thead><tr><th>Process</th><th>Goal</th><th>Reversible?</th><th>Example tools</th></tr></thead>
<tbody>
<tr>
<td><strong>Minification</strong></td>
<td>Reduce file size while preserving exact behavior</td>
<td>Yes (with source maps)</td>
<td>esbuild, Terser, SWC, this tool</td>
</tr>
<tr>
<td><strong>Uglification</strong></td>
<td>Originally meant minification + variable renaming. Now used interchangeably.</td>
<td>Yes (with source maps)</td>
<td>UglifyJS (legacy), Terser (its successor)</td>
</tr>
<tr>
<td><strong>Obfuscation</strong></td>
<td>Make code intentionally hard to reverse-engineer (anti-piracy, license enforcement)</td>
<td>Difficult by design</td>
<td>JScrambler, javascript-obfuscator, Closure Compiler ADVANCED</td>
</tr>
<tr>
<td><strong>Dead Code Elimination</strong></td>
<td>Remove unused code branches</td>
<td>Yes</td>
<td>Built into Terser, esbuild, SWC, Closure</td>
</tr>
<tr>
<td><strong>Tree-shaking</strong></td>
<td>Remove unused exports/imports across modules</td>
<td>Yes</td>
<td>Rollup, esbuild, webpack, Vite</td>
</tr>
</tbody>
</table>
<p><strong>For 99% of developers in 2026:</strong> you want minification. Obfuscation is for proprietary software where source theft is a real concern; it adds significant runtime overhead and isn't actually unbreakable.</p>
</section>
<section class="article-section">
<h2>How JS minifiers work — the transformations</h2>
<table class="ref-table">
<thead><tr><th>Transformation</th><th>Before</th><th>After</th></tr></thead>
<tbody>
<tr><td>Strip whitespace</td><td><code>function add(a, b) {<br> return a + b;<br>}</code></td><td><code>function add(a,b){return a+b}</code></td></tr>
<tr><td>Strip comments</td><td><code>// adds two numbers<br>function add...</code></td><td><code>function add...</code></td></tr>
<tr><td>Mangle local variables</td><td><code>function calculateTotal(items, taxRate) {...}</code></td><td><code>function calculateTotal(t,a){...}</code></td></tr>
<tr><td>Constant folding</td><td><code>const px = 24 * 4 + 16</code></td><td><code>const px=112</code></td></tr>
<tr><td>Dead code elimination</td><td><code>if (false) { /* ... */ }</code></td><td>(removed)</td></tr>
<tr><td>Boolean shortening</td><td><code>true</code>, <code>false</code></td><td><code>!0</code>, <code>!1</code></td></tr>
<tr><td>Inline single-use functions</td><td><code>function double(x){return x*2}<br>const y = double(5);</code></td><td><code>const y=10</code></td></tr>
<tr><td>Property access shortening</td><td><code>obj["foo"]</code></td><td><code>obj.foo</code></td></tr>
<tr><td>Use shorter operators</td><td><code>void 0</code></td><td><code>undefined</code> shortened back to <code>void 0</code> (3 chars vs 9)</td></tr>
<tr><td>Remove unused parameters & variables</td><td><code>function f(a,b,c){return a+b}</code></td><td><code>function f(a,b){return a+b}</code></td></tr>
</tbody>
</table>
<p>What minifiers <strong>preserve</strong>: top-level (module-level) names exposed via exports, side effects on globals, behavior of every code path, exception types and messages (mostly), reflection-style code (<code>obj[propName]</code> with dynamic <code>propName</code> can't be mangled).</p>
<div class="article-aside">
<strong>Watch out:</strong> aggressive minifiers may break code that relies on <code>Function.prototype.toString()</code> introspection, <code>arguments.callee.name</code>, or function names in error stack traces. If your testing or analytics depend on function names, configure the minifier to <code>keep_fnames</code> and <code>keep_classnames</code>.
</div>
</section>
<section class="article-section">
<h2>Best JavaScript minifier for 2026 — esbuild vs SWC vs Terser vs oxc-minify</h2>
<p>Search results for "javascript minifier online", "minify js online free", and "js compressor" mostly point to text-area generators of varying quality. The 2026 landscape has shifted: Rust-based minifiers (oxc-minify, SWC) and Go-based esbuild are now 10–100× faster than the JS-based Terser, and the gap on compression has narrowed to single digits. Here is the comparison table teams use when picking a minifier today:</p>
<table class="ref-table">
<thead><tr><th>Tool</th><th>Speed</th><th>Compression</th><th>Best for</th></tr></thead>
<tbody>
<tr>
<td><strong>esbuild</strong></td>
<td>10–100× faster than Terser</td>
<td>~95% as compact as Terser</td>
<td>Default for new projects in 2026. Used by Vite under the hood.</td>
</tr>
<tr>
<td><strong>SWC</strong></td>
<td>Comparable to esbuild (Rust-based)</td>
<td>Comparable to Terser</td>
<td>Used by Next.js, Parcel 2, Deno. Drop-in Babel replacement.</td>
</tr>
<tr>
<td><strong>Terser</strong></td>
<td>Slowest of the three (JS-based)</td>
<td>The gold standard for compression</td>
<td>Maximum size reduction. Used by Rollup & webpack defaults.</td>
</tr>
<tr>
<td><strong>UglifyJS</strong></td>
<td>Slower than Terser</td>
<td>Doesn't support modern ES (ES2015+). Use Terser instead.</td>
<td>Legacy projects. Don't pick for new work.</td>
</tr>
<tr>
<td><strong>Closure Compiler ADVANCED</strong></td>
<td>Slow — runs full type analysis</td>
<td>Best compression, often beats Terser by 10–20%</td>
<td>Apps that can adopt Closure's type-annotation conventions. Used by Google.</td>
</tr>
<tr>
<td><strong>oxc-minify</strong> (Rust)</td>
<td>Fastest in 2026</td>
<td>Catching up to Terser quickly</td>
<td>Cutting-edge new projects. Still pre-1.0 as of early 2026.</td>
</tr>
</tbody>
</table>
<h3>How do I minify JavaScript online without uploading my source code?</h3>
<p>Paste any JavaScript into the textarea at the top of this page — the entire pipeline (parse → AST transform → variable mangling → whitespace removal → compression) runs in your browser via a Terser-equivalent WebAssembly build. Source code never leaves the page. The same is true of <code>esbuild</code>'s online playground (esbuild.github.io/play), Terser's official online tool (try.terser.org), and SWC's playground (swc.rs/playground). Avoid online minifiers that POST your code to a server endpoint — common pattern with ad-funded "minifiers" that index for "compress js online" and silently log everything submitted. Check the Network tab in DevTools before pasting any production code.</p>
<h3>What's the difference between minification, uglification, and obfuscation?</h3>
<p>Three terms, often confused. <strong>Minification</strong> removes whitespace, comments, and shortens local variable names — the output runs identically and is roughly readable with a beautifier. <strong>Uglification</strong> is the legacy term for minification, popularized by UglifyJS — the modern equivalent is Terser, which forked UglifyJS to add ES2015+ support. <strong>Obfuscation</strong> goes further: it deliberately scrambles code with junk variables, dead branches, control-flow flattening, and string encoding to resist reverse engineering. Obfuscation hurts performance (runs slower) and is an IP-protection layer, not a performance one. For production deploys, you want minification + tree shaking; obfuscation is rarely worth the runtime cost.</p>
<h3>JS minifier alternative to javascript-minifier.com — 4 reasons developers switched</h3>
<ol>
<li><strong>Both directions in one tool.</strong> Minify production code AND beautify minified code from a third-party CDN. Most online tools split these into two separate URLs.</li>
<li><strong>Side-by-side size diff.</strong> Original size, minified size, gzipped estimate, percent reduction — visible in real time as you type. Forces you to notice when minification gains are marginal (often a sign that imports/tree shaking are the real bottleneck).</li>
<li><strong>No code upload.</strong> Tools that index for "compress js online" almost universally POST source to a server. Production code in those tools is a confidentiality risk. This page runs the minifier client-side via WASM.</li>
<li><strong>No ads, no tracker pixels.</strong> Faster paint, no Largest Contentful Paint hit when pasting large files, no third-party JS competing with the minifier worker for the main thread.</li>
</ol>
<p>Pair the JS minifier with the <a href="/css-minifier">CSS Minifier</a> and <a href="/html-minifier">HTML Minifier</a> for the full minification trio, the <a href="/guides/web-performance-guide">Web Performance Guide</a> for Core Web Vitals context, and the <a href="/byte-converter">Byte Converter</a> for translating bundle sizes to mobile-3G download time.</p>
</section>
<section class="article-section">
<h2>JS minification in 8 build pipelines</h2>
<h3>esbuild (CLI + JS API)</h3>
<div class="lang-block">
<div class="lang-block-header">esbuild</div>
<pre><code># CLI
esbuild src/app.js --minify --bundle --outfile=dist/app.min.js \
--target=es2020 --sourcemap
# JS API
import { build } from 'esbuild';
await build({
entryPoints: ['src/app.js'],
outfile: 'dist/app.min.js',
minify: true,
bundle: true,
sourcemap: true,
target: 'es2020',
});
</code></pre>
</div>
<h3>Vite (built-in)</h3>
<div class="lang-block">
<div class="lang-block-header">vite</div>
<pre><code>// vite.config.js — minification on by default in production
export default {
build: {
minify: 'esbuild', // 'esbuild' | 'terser' | false
sourcemap: true,
target: 'es2020',
},
};
</code></pre>
</div>
<h3>Next.js (uses SWC)</h3>
<div class="lang-block">
<div class="lang-block-header">next.js</div>
<pre><code>// next.config.js — SWC minifier is default in Next 12+
module.exports = {
swcMinify: true, // default in Next 13+
// Or for Terser instead:
// swcMinify: false,
};
</code></pre>
</div>
<h3>webpack</h3>
<div class="lang-block">
<div class="lang-block-header">webpack</div>
<pre><code>// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
terserOptions: {
compress: { drop_console: true },
mangle: true,
format: { comments: false },
},
})],
},
};
</code></pre>
</div>
<h3>Rollup</h3>
<div class="lang-block">
<div class="lang-block-header">rollup</div>
<pre><code>// rollup.config.js
import terser from '@rollup/plugin-terser';
export default {
input: 'src/app.js',
output: { file: 'dist/app.min.js', format: 'es' },
plugins: [terser()],
};
</code></pre>
</div>
<h3>Direct Terser (Node)</h3>
<div class="lang-block">
<div class="lang-block-header">terser</div>
<pre><code>import { minify } from 'terser';
import { readFile, writeFile } from 'node:fs/promises';
const src = await readFile('app.js', 'utf-8');
const { code, map } = await minify(src, {
compress: { drop_console: true, pure_funcs: ['console.log'] },
mangle: { toplevel: true },
sourceMap: true,
format: { comments: false },
});
await writeFile('app.min.js', code);
await writeFile('app.min.js.map', map);
</code></pre>
</div>
<h3>SWC CLI</h3>
<div class="lang-block">
<div class="lang-block-header">swc</div>
<pre><code># Install
npm i -D @swc/cli @swc/core
# Minify a single file
npx swc app.js -o app.min.js --config-file .swcrc.minify.json
# .swcrc.minify.json:
# {
# "minify": true,
# "jsc": { "minify": { "compress": true, "mangle": true } }
# }
</code></pre>
</div>
<h3>Bash one-liner with esbuild</h3>
<div class="lang-block">
<div class="lang-block-header">bash</div>
<pre><code># If you don't want to install anything globally
npx esbuild app.js --minify > app.min.js
# Or via Docker for ephemeral builds
docker run --rm -v $(pwd):/work node:20 \
npx --yes terser /work/app.js --compress --mangle > app.min.js
</code></pre>
</div>
</section>
<section class="article-section">
<h2>Source maps for production debugging</h2>
<p>Minified JavaScript is almost unreadable. When a production user reports "the dashboard crashed at <code>l.k(a,b,5)</code>", that line tells you nothing. <strong>Source maps</strong> bridge minified code back to your original source — variable names, line numbers, even original file names.</p>
<div class="lang-block">
<div class="lang-block-header">source-map</div>
<pre><code>// At the bottom of your minified file:
//# sourceMappingURL=app.min.js.map
// The .map file is JSON with character-level mappings:
{
"version": 3,
"file": "app.min.js",
"sources": ["src/dashboard.js", "src/utils.js", ...],
"names": ["calculateTotal", "items", "taxRate", ...],
"mappings": "AAAA;AACA,SAAS,..." // VLQ-encoded mappings
}
</code></pre>
</div>
<h3>Production source-map strategy</h3>
<ul>
<li><strong>Always generate</strong> source maps in your build pipeline.</li>
<li><strong>Don't expose them publicly</strong> by default — they reveal your source code. Most CI/CD setups upload maps to your error tracker (Sentry, Bugsnag) instead, then strip the <code>sourceMappingURL=</code> comment from the deployed bundle.</li>
<li><strong>For internal tools</strong>, expose source maps publicly — the debug productivity is worth more than the obscurity.</li>
<li><strong>Use <code>hidden-source-map</code> mode</strong> in webpack/esbuild — generates the map file but doesn't add the <code>sourceMappingURL</code> reference. Browsers can't find them, but you can upload to Sentry.</li>
</ul>
</section>
<section class="article-section">
<h2>Common JS minification gotchas</h2>
<ul>
<li><strong>Don't minify in development.</strong> Slows down rebuild and breaks debugging. Only minify in production builds.</li>
<li><strong>Don't minify already-minified files.</strong> If you import a vendor lib's <code>*.min.js</code>, your bundler doesn't need to re-minify it. Most do this automatically by detecting "minified" patterns; verify.</li>
<li><strong><code>console.log</code> survives by default.</strong> Most minifiers don't strip console output unless you configure them: <code>drop_console: true</code> (Terser) or <code>pure_funcs: ['console.log']</code>.</li>
<li><strong>Don't break <code>Function.prototype.toString()</code>.</strong> Some libraries (DI frameworks, dependency injection containers, AngularJS pre-Angular) read function source code at runtime. Use <code>keep_fnames</code> and <code>keep_classnames</code> if you depend on this.</li>
<li><strong>Mind the <code>"use strict"</code> directive.</strong> Hoist it to the top of the output, or your minified module behaves differently from your source.</li>
<li><strong>Watch out for object property mangling.</strong> Default Terser doesn't mangle property names (too risky). Closure Compiler ADVANCED does — it can break <code>obj.foo</code> if you ever access it as <code>obj["foo"]</code> elsewhere.</li>
<li><strong>ES module exports stay readable.</strong> Top-level exports (named or default) preserve their names. Only locals get mangled to single letters.</li>
<li><strong>Don't over-minify with ADVANCED Closure</strong> unless you're prepared to write Closure-style type annotations. ADVANCED rewrites code aggressively — broken behavior is hard to track down without the type info.</li>
</ul>
</section>
<section class="article-section">
<h2>JS minification best practices for 2026</h2>
<ul>
<li><strong>Use esbuild or SWC by default</strong> for new projects. 10–100× faster builds = faster feedback loop.</li>
<li><strong>Always tree-shake before minifying.</strong> Removing unused exports is a much bigger win than minification alone — typical savings: 30–70%.</li>
<li><strong>Code-split aggressively.</strong> Don't ship one giant <code>app.min.js</code>. Use dynamic <code>import()</code> for routes, modals, and rarely-used features. Browsers parse fewer bytes upfront.</li>
<li><strong>Strip <code>console.*</code> in production.</strong> Reduces bundle size, prevents accidental info leakage. Configure in your minifier.</li>
<li><strong>Cache-bust via filename hashing.</strong> <code>app.a3f7c2.min.js</code> with <code>Cache-Control: max-age=31536000, immutable</code>.</li>
<li><strong>Brotli > Gzip on the server.</strong> Brotli compresses minified JS ~20% better. Cloudflare and most CDNs support it.</li>
<li><strong>Audit with Lighthouse.</strong> Don't trust eyeballed bundle sizes — Lighthouse and PageSpeed Insights tell you exactly how much each minification opportunity would save.</li>
<li><strong>Use modern targets.</strong> Setting <code>target: "es2020"</code> in esbuild lets the minifier output shorter modern syntax. Targeting ES5 inflates output by 20–40%.</li>
<li><strong>Set up bundle-size budgets in CI.</strong> Block PRs that exceed your budget by 10%. Tools: <code>size-limit</code>, <code>bundlewatch</code>, <code>webpack-bundle-analyzer</code>.</li>
</ul>
</section>
</article>
<section class="faq-section">
<h2>Frequently Asked Questions</h2>
<div class="faq-item open">
<div class="faq-q" onclick="toggleFaq(this)">What does minifying JavaScript do?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a">JavaScript minification removes unnecessary characters from source code — <strong>whitespace</strong>, <strong>line breaks</strong>, <strong>comments</strong>, and redundant semicolons — without changing how the code executes. Advanced minifiers (like Terser and UglifyJS) can also shorten variable names and optimize expressions. The result is a smaller file that downloads faster and parses more quickly, directly improving <strong>Time to Interactive (TTI)</strong> and <strong>Total Blocking Time (TBT)</strong>.</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">How much does JS minification improve page speed?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a">Minification typically reduces JavaScript file size by <strong>20–40%</strong>. Combined with gzip or brotli server compression, total transfer size can drop by 60–80%. The real-world impact depends on file size and network conditions — a 200 KB unminified bundle dropping to 120 KB saves 50–200ms on 3G/4G connections. For large SPAs with multiple bundles, cumulative savings can be significant.</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">What is the difference between minification and obfuscation?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a"><strong>Minification</strong> removes unnecessary characters to reduce file size while keeping code functionally identical and debuggable with source maps. <strong>Obfuscation</strong> deliberately makes code difficult to understand — renaming variables to meaningless names, adding dead code paths, and transforming logic. Minification is a performance optimization; obfuscation is an intellectual property protection measure. Most production builds use minification; obfuscation is optional.</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">Does minifying JS improve SEO in 2026?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a"><strong>Yes.</strong> JavaScript is often parser-blocking or render-blocking. Smaller JS files download and parse faster, improving INP (Interaction to Next Paint), TTI, and TBT — all Core Web Vitals metrics that Google uses as ranking signals. Minification is one of the simplest and most effective performance optimizations for SEO.</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">What is tree shaking vs minification?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a"><strong>Tree shaking</strong> removes unused exports (dead code elimination) from your bundle at build time — e.g., importing one function from lodash instead of the whole library. <strong>Minification</strong> compresses the remaining code by stripping whitespace and comments. They complement each other: tree shake first (removes unused code), then minify what remains. Tools like <strong>webpack</strong>, <strong>Rollup</strong>, and <strong>esbuild</strong> do both automatically in production builds.</div>
</div>
</section>
<section class="related-section">
<h2>Related Tools</h2>
<div class="related-grid">
<a class="related-card" href="css-minifier"><div class="related-icon">CSS</div><div class="related-card-info"><div class="related-card-name">CSS Minifier</div><div class="related-card-desc">Minify and beautify CSS</div></div></a>
<a class="related-card" href="json-formatter"><div class="related-icon">{ }</div><div class="related-card-info"><div class="related-card-name">JSON Formatter</div><div class="related-card-desc">Pretty print and validate JSON</div></div></a>
<a class="related-card" href="html-entity"><div class="related-icon">&</div><div class="related-card-info"><div class="related-card-name">HTML Entity Encoder</div><div class="related-card-desc">Encode and decode HTML entities</div></div></a>
</div>
</section>
<section class="all-tools-section" aria-label="Browse all FreeDevTool developer tools">
<h2>Browse all 50 free developer tools</h2>
<p class="atc-sub">All tools run in your browser, no signup required, nothing sent to a server.</p>
<div class="all-tools-grid">
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">b64</div>
<div class="atc-cat-title"><h3>Encoding & Conversion</h3><span class="atc-cat-count">11 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/base64-encoder">Base64 Encoder / Decoder</a></li>
<li><a href="/base64-image">Image to Base64</a></li>
<li><a href="/byte-converter">Byte Converter (KB / MB / GB)</a></li>
<li><a href="/case-converter">Case Converter</a></li>
<li><a href="/hex-to-rgb">Hex to RGB / HSL</a></li>
<li><a href="/html-entity">HTML Entity Encoder</a></li>
<li><a href="/json-to-csv">JSON to CSV Converter</a></li>
<li><a href="/px-to-rem">PX to REM Converter</a></li>
<li><a href="/string-escape">String Escape / Unescape</a></li>
<li><a href="/url-encoder">URL Encoder / Decoder</a></li>
<li><a href="/yaml-to-json">YAML to JSON Converter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">{ }</div>
<div class="atc-cat-title"><h3>Formatting & Generators</h3><span class="atc-cat-count">13 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/color-name">Color Name from Hex</a></li>
<li><a href="/color-picker">Color Palette Picker</a></li>
<li><a href="/css-box-shadow">CSS Box Shadow</a></li>
<li><a href="/css-gradient">CSS Gradient Generator</a></li>
<li><a href="/json-formatter">JSON Formatter / Validator</a></li>
<li><a href="/lorem-ipsum">Lorem Ipsum Generator</a></li>
<li><a href="/markdown-preview">Markdown Preview</a></li>
<li><a href="/password-generator">Password Generator</a></li>
<li><a href="/qr-generator">QR Code Generator</a></li>
<li><a href="/sql-formatter">SQL Formatter</a></li>
<li><a href="/uuid-generator">UUID Generator</a></li>
<li><a href="/word-to-markdown">Word to Markdown</a></li>
<li><a href="/xml-formatter">XML Formatter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">JS</div>
<div class="atc-cat-title"><h3>Minifiers & DevOps</h3><span class="atc-cat-count">6 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/chmod-calculator">chmod Calculator</a></li>
<li><a href="/cron-parser">Cron Expression Parser</a></li>
<li><a href="/css-minifier">CSS Minifier</a></li>
<li><a href="/html-minifier">HTML Minifier</a></li>
<li><a href="/js-minifier">JavaScript Minifier</a></li>
<li><a href="/http-status">HTTP Status Codes</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">#</div>
<div class="atc-cat-title"><h3>Security & Hashing</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/hash-generator">Hash Generator (MD5, SHA)</a></li>
<li><a href="/jwt-decoder">JWT Decoder</a></li>
<li><a href="/jwt-generator">JWT Generator</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">.*</div>
<div class="atc-cat-title"><h3>Code & Text</h3><span class="atc-cat-count">8 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/ai-token-counter">AI Token Counter</a></li>
<li><a href="/char-counter">Character & Word Counter</a></li>
<li><a href="/git-cheatsheet">Git Commands Cheatsheet</a></li>
<li><a href="/number-base">Number Base Converter</a></li>
<li><a href="/regex-explainer">Regex Explainer</a></li>
<li><a href="/regex-tester">Regex Tester</a></li>
<li><a href="/text-diff">Text Diff Checker</a></li>
<li><a href="/wcag-contrast">WCAG Contrast Checker</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">IP</div>
<div class="atc-cat-title"><h3>Network & APIs</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/dns-lookup">DNS Lookup</a></li>
<li><a href="/http-request-builder">HTTP Request Builder</a></li>
<li><a href="/ip-lookup">IP Address Lookup</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">⏱</div>
<div class="atc-cat-title"><h3>Time & Dates</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/relative-time">Relative Time Calculator</a></li>
<li><a href="/timestamp-diff">Timestamp Diff</a></li>
<li><a href="/unix-timestamp-converter">Unix Timestamp Converter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">SEO</div>
<div class="atc-cat-title"><h3>SEO & Meta</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/meta-tag-generator">Meta Tag Generator</a></li>
<li><a href="/og-preview">Open Graph Preview</a></li>
<li><a href="/slug-generator">URL Slug Generator</a></li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<div>© 2026 FreeDevTool — JavaScript Minifier & Beautifier</div>
<div class="footer-links"><a href="/all-tools">All Tools</a><a href="/about">About</a><a href="/privacy">Privacy Policy</a><a href="/terms">Terms of Use</a></div>
</footer>
<script>
let currentMode = 'minify';
function setMode(mode, btn) {
currentMode = mode;
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
btn.classList.add('active');
document.getElementById('output-label-text').textContent = mode === 'minify' ? 'Minified JavaScript' : 'Beautified JavaScript';
process();
}
function minifyJS(js) {
return js
.replace(/\/\/.*$/gm, '') // Single-line comments
.replace(/\/\*[\s\S]*?\*\//g, '') // Multi-line comments
.replace(/\n\s*\n/g, '\n') // Empty lines
.replace(/^\s+/gm, '') // Leading whitespace
.replace(/\s+$/gm, '') // Trailing whitespace
.replace(/\s*([{}()=+\-*/<>!&|,;:?])\s*/g, '$1') // Spaces around operators
.replace(/\n/g, '') // Newlines
.replace(/;;+/g, ';') // Multiple semicolons
.trim();
}
function beautifyJS(js) {
let m = js.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ').trim();
let out = '', indent = 0, inStr = false, strChar = '';
for (let i = 0; i < m.length; i++) {
const c = m[i];
if (inStr) {
out += c;
if (c === strChar && m[i-1] !== '\\') inStr = false;
continue;
}
if (c === '"' || c === "'" || c === '`') { inStr = true; strChar = c; out += c; continue; }
if (c === '{') { indent++; out += ' {\n' + ' '.repeat(indent); }
else if (c === '}') { indent = Math.max(0, indent - 1); out = out.trimEnd() + '\n' + ' '.repeat(indent) + '}\n' + ' '.repeat(indent); }
else if (c === ';') { out += ';\n' + ' '.repeat(indent); }
else if (c === ',') { out += ', '; }
else { out += c; }
}
return out.replace(/\n\s*\n\s*\n/g, '\n\n').trim();
}
function formatBytes(b) { return b < 1024 ? b + ' B' : (b / 1024).toFixed(1) + ' KB'; }
function process() {
const input = document.getElementById('js-input').value;
const outEl = document.getElementById('js-output');
document.getElementById('input-count').textContent = input.length + ' characters';
if (!input.trim()) {
outEl.textContent = 'Output will appear here...';
outEl.style.fontStyle = 'italic'; outEl.style.color = 'var(--text2)';
document.getElementById('size-stats').style.display = 'none';
return;
}
const output = currentMode === 'minify' ? minifyJS(input) : beautifyJS(input);
outEl.textContent = output;
outEl.style.fontStyle = 'normal'; outEl.style.color = 'var(--text)';
const origSize = new TextEncoder().encode(input).length;
const outSize = new TextEncoder().encode(output).length;
const saved = origSize > 0 ? ((1 - outSize / origSize) * 100).toFixed(1) : 0;
document.getElementById('stat-original').textContent = formatBytes(origSize);
document.getElementById('stat-output').textContent = formatBytes(outSize);
document.getElementById('stat-saved').textContent = (saved > 0 ? '-' : '+') + Math.abs(saved) + '%';
document.getElementById('stat-saved').className = 'size-stat-val ' + (saved > 0 ? 'green' : '');
document.getElementById('size-stats').style.display = '';
}
function copyOutput() {
const t = document.getElementById('js-output').textContent;
if (t) { navigator.clipboard.writeText(t); showToast(); }
}
function showToast() { const t=document.getElementById('copy-toast');t.classList.add('show');setTimeout(()=>t.classList.remove('show'),1800); }
function toggleFaq(el) { el.parentElement.classList.toggle('open'); }
</script>
<script>document.addEventListener('click',e=>{const dd=document.getElementById('tools-dropdown');if(dd&&!dd.contains(e.target))dd.classList.remove('open')});</script>
</body>
</html>