Skip to content

Commit

Permalink
feat(html/minifier): Remove empty metadata elements (#5085)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Jul 2, 2022
1 parent 8c42961 commit cb845c9
Show file tree
Hide file tree
Showing 16 changed files with 271 additions and 205 deletions.
392 changes: 211 additions & 181 deletions crates/swc_html_minifier/src/lib.rs
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions crates/swc_html_minifier/src/option.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ pub struct MinifyOptions {
pub force_set_html5_doctype: bool,
#[serde(default = "default_collapse_whitespaces")]
pub collapse_whitespaces: CollapseWhitespaces,
// Remove safe empty elements with metadata content, i.e. the `script` and `style` element
// without content and attributes, `meta` and `link` elements without attributes and etc
#[serde(default = "true_by_default")]
pub remove_empty_metedata_elements: bool,
#[serde(default = "true_by_default")]
pub remove_comments: bool,
#[serde(default = "default_preserve_comments")]
Expand Down
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/comment/spaces/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<title>Document</title>
<!-- a --> <!-- b --> <!-- c --><link>
<!-- a --> <!-- b --> <!-- c --><link rel="stylesheet" href="test.css">
</head>
<body><div>foo<div> baz </div> bar</div></body>
</html>
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/comment/spaces/output.min.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang=en><title>Document</title><link><div>foo<div>baz</div>bar</div>
<!doctype html><html lang=en><title>Document</title><link rel=stylesheet href=test.css><div>foo<div>baz</div>bar</div>
23 changes: 23 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/empty-metadata-elements/input.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!doctype html>
<html lang="en">
<head>
<title></title>
<base>
</head>
<body>
<script></script>
<style></style>
<link>
<meta>
<title></title>
<svg>
<script></script>
<style></style>
</svg>
<script>



</script>
</body>
</html>
9 changes: 9 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/empty-metadata-elements/output.min.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!doctype html><html lang=en><body>




<svg>


</svg>
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-all/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
</a>
</svg>

<script>
<script data-test="test">



Expand Down
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-all/output.min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
Foo


</textarea><div><div>Text</div></div><unknown><div>Text</div></unknown><div></div><svg version=1.1 viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1><linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient><rect x=0 y=0 width=100 height=100 style=fill:url(#gradient) /><circle cx=50 cy=50 r=30 style=fill:url(#gradient) /></svg><svg viewBox="0 0 100 100"><a href=/docs/Web/SVG/Element/circle><circle cx=50 cy=40 r=35 /></a><a href=/docs/Web/SVG/Element/text><text x=50 y=90 text-anchor=middle>&lt;circle></text></a></svg><script></script><script>console.log("test")</script><xmp>
</textarea><div><div>Text</div></div><unknown><div>Text</div></unknown><div></div><svg version=1.1 viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1><linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient><rect x=0 y=0 width=100 height=100 style=fill:url(#gradient) /><circle cx=50 cy=50 r=30 style=fill:url(#gradient) /></svg><svg viewBox="0 0 100 100"><a href=/docs/Web/SVG/Element/circle><circle cx=50 cy=40 r=35 /></a><a href=/docs/Web/SVG/Element/text><text x=50 y=90 text-anchor=middle>&lt;circle></text></a></svg><script data-test=test></script><script>console.log("test")</script><xmp>

test

Expand Down
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-conservative/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
</a>
</svg>

<script>
<script data-test="test">



Expand Down
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-conservative/output.min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
Foo


</textarea> <div> <div>Text</div> </div> <unknown> <div>Text</div> </unknown> <div> </div> <svg version=1.1 viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1> <linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient> <rect x=0 y=0 width=100 height=100 style=fill:url(#gradient) /> <circle cx=50 cy=50 r=30 style=fill:url(#gradient) /> </svg> <svg viewBox="0 0 100 100"> <a href=/docs/Web/SVG/Element/circle> <circle cx=50 cy=40 r=35 /> </a> <a href=/docs/Web/SVG/Element/text> <text x=50 y=90 text-anchor=middle> &lt;circle> </text> </a> </svg> <script></script> <script>console.log("test")</script> <xmp>
</textarea> <div> <div>Text</div> </div> <unknown> <div>Text</div> </unknown> <div> </div> <svg version=1.1 viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1> <linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient> <rect x=0 y=0 width=100 height=100 style=fill:url(#gradient) /> <circle cx=50 cy=50 r=30 style=fill:url(#gradient) /> </svg> <svg viewBox="0 0 100 100"> <a href=/docs/Web/SVG/Element/circle> <circle cx=50 cy=40 r=35 /> </a> <a href=/docs/Web/SVG/Element/text> <text x=50 y=90 text-anchor=middle> &lt;circle> </text> </a> </svg> <script data-test=test></script> <script>console.log("test")</script> <xmp>

test

Expand Down
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-disabled/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
</a>
</svg>

<script>
<script data-test="test">



Expand Down
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-disabled/output.min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
</a>
</svg>

<script></script>
<script data-test=test></script>

<script>console.log("test")</script>

Expand Down
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-only-metadata/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
</a>
</svg>

<script>
<script data-test="test">



Expand Down
2 changes: 1 addition & 1 deletion ...es/swc_html_minifier/tests/fixture/text/collapse-whitespace-only-metadata/output.min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
</a>
</svg>

<script></script>
<script data-test=test></script>

<script>console.log("test")</script>

Expand Down
24 changes: 12 additions & 12 deletions crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-smart/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
</a>
</svg>

<script>
<script data-test="test">



Expand Down Expand Up @@ -300,13 +300,13 @@

<div>
<span>test</span>
<link>
<link rel="stylesheet" href="">
<span>test</span>
</div>

<div>
<span>test</span>
<meta>
<meta name="content">
<span>test</span>
</div>

Expand All @@ -329,13 +329,13 @@
</div>

<div>
<meta>
<meta>
<meta name="test">
<meta name="test">
</div>

<div>
<link>
<link>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
</div>

<div>
Expand Down Expand Up @@ -364,19 +364,19 @@
<span>test</span>
</div>

<div> <meta> </div>
<div> <meta name="test"> </div>
<div> <style>a { color: red; }</style> </div>

<div>
<meta>
<meta name="test">
<div>test</div>
<meta>
<meta name="test">
</div>

<div>
<meta>
<meta name="test">
<span>test</span>
<meta>
<meta name="test">
</div>

<svg>
Expand Down
4 changes: 2 additions & 2 deletions crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-smart/output.min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@
Foo


</textarea><div><div>Text</div></div><unknown><div>Text</div></unknown><div></div><svg version=1.1 viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1> <linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient><rect x=0 y=0 width=100 height=100 style=fill:url(#gradient) /> <circle cx=50 cy=50 r=30 style=fill:url(#gradient) /> </svg><svg viewBox="0 0 100 100"> <a href=/docs/Web/SVG/Element/circle><circle cx=50 cy=40 r=35 /> </a> <a href=/docs/Web/SVG/Element/text><text x=50 y=90 text-anchor=middle>&lt;circle> </text></a></svg><script></script> <script>console.log("test")</script><xmp>
</textarea><div><div>Text</div></div><unknown><div>Text</div></unknown><div></div><svg version=1.1 viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1> <linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient><rect x=0 y=0 width=100 height=100 style=fill:url(#gradient) /> <circle cx=50 cy=50 r=30 style=fill:url(#gradient) /> </svg><svg viewBox="0 0 100 100"> <a href=/docs/Web/SVG/Element/circle><circle cx=50 cy=40 r=35 /> </a> <a href=/docs/Web/SVG/Element/text><text x=50 y=90 text-anchor=middle>&lt;circle> </text></a></svg><script data-test=test></script> <script>console.log("test")</script><xmp>

test

</xmp><div>foo <a>baz </a>bar foo <a>baz </a>bar foo <a>baz </a>bar</div><div>foo <a>baz </a>bar foo <a>baz </a>bar foo <a>baz </a>bar</div><div>foo <img src=https://prettier.io/icon.png></div><div>text <img src=https://colourlex.com/wp-content/uploads/2021/02/vine-black-painted-swatch.jpg alt=test> test</div><span>test<script>console.log("test")</script>test</span> <span>test <script>console.log("test")</script> test</span><div><p>blah</div><div>test <br> test</div><div>test <wbr> test</div><div>a <input> c</div><div><div>a</div><div>b</div></div><div><span> a </span><span>b</span></div><div><div>test</div><span>test</span></div><div><div>test</div><span>test</span></div><div><span>test</span><div>test</div></div><div><span>test</span> <span>test</span></div><div><div>test</div><div>test</div></div><div><span>test</span><p>test<p>test<p>test</div><div><p>test<p>test<p>test</p><span>test</span></div><div><a href=test> test </a><a href=test>test</a></div><div><a href=test>test</a><a href=test>test</a></div><div><p>blah</div><div>test <button>test</button></div><div><button>test</button> <button>test</button></div><div>foo <button>test</button> foo</div><div>foo<button>test</button>foo</div><div>foo <button>test</button>foo</div><div>foo<button>test</button> foo</div><div>foo<button>test</button>foo</div><div>foo <button>test</button>foo</div><div>foo<button>test</button> foo</div><div><span> foo </span></div><p>foo <img> bar<p>foo<img>bar<p>foo <img>bar<p>foo<img> bar<p>foo <wbr> bar<p>foo <br> bar<p>foo <nobr>a</nobr> bar<div> fo o </div><div> fo o </div><p><p>a b<div class=leaveAlone></div><div>foo bar</div><div class=leaveAlone><div></div><span> </span>foo bar</div><div class=leaveAlone><span> </span>foo bar</div><p>foo <span></span><p>foo<span></span><div>foo <button>test</button> foo</div><div>foo <button>test</button> foo <button>test</button> foo</div><div>foo <span>foo</span> foo</div><div>foo<span> foo</span>foo</div><div><span>a </span>b<span> c</span></div><div><span>a </span>b <span>c</span></div><div><span>a </span>b <span>c</span></div><div>foo <span>baz</span></div><div>foo <span>baz</span></div><div>foo<span> baz</span></div><div>foo<span>baz</span></div><span>test </span><span><span><span><span>foo <span>baz</span></span></span></span></span> <span><span><span><span>foo <span>baz</span></span></span></span></span><span>test </span><div>test</div><span><span><span><span>foo <span>baz</span></span></span></span></span> <span><span><span><span>foo <span>baz</span></span></span></span></span><div>test</div><div><div></div></div><pre>
foo

baz
</pre><div>a <input> c</div><div>Empty</div><!--[if lte IE 6]> <span>A</span> <span title=" sigificant whitespace ">blah blah</span><![endif]--><div><a href=#> <span><b>foo </b><i> bar </i></span></a></div><div>a b</div><div>a b c d</div><div>text</div><span> text </span><span> text </span><div><span>test</span><base><span>test</span></div><div><span>test</span> <command>test</command> <span>test</span></div><div><span>test</span><link><span>test</span></div><div><span>test</span><meta><span>test</span></div><div><span>test</span> <script>console.log("test")</script> <span>test</span></div><div><span>test</span><style>a{color:red}</style><span>test</span></div><div><span>test</span><title>test</title><span>test</span></div><div><meta><meta></div><div><link><link></div><div><script>console.log("test")</script> <script>console.log("test")</script></div><div><script>console.log("test")</script> <span>test</span> <script>console.log("test")</script></div><div><style>a{color:red}</style><style>a{color:red}</style></div><div><script>console.log("test")</script><style>a{color:red}</style></div><div><span itemscope><meta itemprop=name content="The Castle">test</span> <span>test</span></div><div><meta></div><div><style>a{color:red}</style></div><div><meta><div>test</div><meta></div><div><meta><span>test</span><meta></div><svg> <title>test</title> <metadata>test</metadata> <desc>test</desc> </svg><svg> <a>test</a> <a>test</a> </svg><svg> <text x=20 y=35><tspan font-weight=bold fill=red>This is bold and red</tspan> <tspan font-weight=bold fill=red>This is bold and red</tspan> </text></svg><svg> <tspan>test</tspan> <foreignObject>test</foreignObject> </svg><svg> <text x=20 y=35><tspan font-weight=bold fill=red>This is bold and red</tspan> <tspan font-weight=bold fill=red>This is bold and red</tspan> </text></svg><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1> <linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient><rect x=0 y=0 width=100 height=100 style=fill:url(#gradient) /> <circle cx=50 cy=50 r=30 style=fill:url(#gradient) /> </svg><svg> <script>console.log("test")</script></svg><svg><style>a{color:red}</style></svg>
</pre><div>a <input> c</div><div>Empty</div><!--[if lte IE 6]> <span>A</span> <span title=" sigificant whitespace ">blah blah</span><![endif]--><div><a href=#> <span><b>foo </b><i> bar </i></span></a></div><div>a b</div><div>a b c d</div><div>text</div><span> text </span><span> text </span><div><span>test</span><span>test</span></div><div><span>test</span> <command>test</command> <span>test</span></div><div><span>test</span><link rel=stylesheet href=""><span>test</span></div><div><span>test</span><meta name=content><span>test</span></div><div><span>test</span> <script>console.log("test")</script> <span>test</span></div><div><span>test</span><style>a{color:red}</style><span>test</span></div><div><span>test</span><title>test</title><span>test</span></div><div><meta name=test><meta name=test></div><div><link rel=stylesheet href=""><link rel=stylesheet href=""></div><div><script>console.log("test")</script> <script>console.log("test")</script></div><div><script>console.log("test")</script> <span>test</span> <script>console.log("test")</script></div><div><style>a{color:red}</style><style>a{color:red}</style></div><div><script>console.log("test")</script><style>a{color:red}</style></div><div><span itemscope><meta itemprop=name content="The Castle">test</span> <span>test</span></div><div><meta name=test></div><div><style>a{color:red}</style></div><div><meta name=test><div>test</div><meta name=test></div><div><meta name=test><span>test</span><meta name=test></div><svg> <title>test</title> <metadata>test</metadata> <desc>test</desc> </svg><svg> <a>test</a> <a>test</a> </svg><svg> <text x=20 y=35><tspan font-weight=bold fill=red>This is bold and red</tspan> <tspan font-weight=bold fill=red>This is bold and red</tspan> </text></svg><svg> <tspan>test</tspan> <foreignObject>test</foreignObject> </svg><svg> <text x=20 y=35><tspan font-weight=bold fill=red>This is bold and red</tspan> <tspan font-weight=bold fill=red>This is bold and red</tspan> </text></svg><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1> <linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient><rect x=0 y=0 width=100 height=100 style=fill:url(#gradient) /> <circle cx=50 cy=50 r=30 style=fill:url(#gradient) /> </svg><svg> <script>console.log("test")</script></svg><svg><style>a{color:red}</style></svg>

1 comment on commit cb845c9

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Benchmark

Benchmark suite Current: cb845c9 Previous: 2f2039c Ratio
es/full/minify/libraries/antd 1622278891 ns/iter (± 11354460) 1649683665 ns/iter (± 11179019) 0.98
es/full/minify/libraries/d3 405433761 ns/iter (± 5828541) 413076625 ns/iter (± 12941708) 0.98
es/full/minify/libraries/echarts 1611406136 ns/iter (± 24185414) 1629429673 ns/iter (± 37979655) 0.99
es/full/minify/libraries/jquery 88722317 ns/iter (± 1285370) 97487429 ns/iter (± 4904514) 0.91
es/full/minify/libraries/lodash 116794705 ns/iter (± 1608474) 126561694 ns/iter (± 11806956) 0.92
es/full/minify/libraries/moment 51466879 ns/iter (± 932945) 50884626 ns/iter (± 1427521) 1.01
es/full/minify/libraries/react 17376299 ns/iter (± 287114) 17343124 ns/iter (± 82964) 1.00
es/full/minify/libraries/terser 599632273 ns/iter (± 5061040) 607778629 ns/iter (± 17292900) 0.99
es/full/minify/libraries/three 536807996 ns/iter (± 1278493) 559673717 ns/iter (± 15217928) 0.96
es/full/minify/libraries/typescript 3439486496 ns/iter (± 36814612) 3440841141 ns/iter (± 87545187) 1.00
es/full/minify/libraries/victory 746013580 ns/iter (± 18869307) 722569267 ns/iter (± 10810069) 1.03
es/full/minify/libraries/vue 159296534 ns/iter (± 6544050) 137018057 ns/iter (± 4239741) 1.16
es/full/codegen/es3 32690 ns/iter (± 753) 32649 ns/iter (± 584) 1.00
es/full/codegen/es5 32532 ns/iter (± 411) 32689 ns/iter (± 797) 1.00
es/full/codegen/es2015 32554 ns/iter (± 1271) 32794 ns/iter (± 989) 0.99
es/full/codegen/es2016 32673 ns/iter (± 709) 32759 ns/iter (± 467) 1.00
es/full/codegen/es2017 32693 ns/iter (± 831) 32681 ns/iter (± 547) 1.00
es/full/codegen/es2018 32679 ns/iter (± 2393) 32670 ns/iter (± 398) 1.00
es/full/codegen/es2019 32606 ns/iter (± 296) 32732 ns/iter (± 18294) 1.00
es/full/codegen/es2020 32625 ns/iter (± 370) 32650 ns/iter (± 655) 1.00
es/full/all/es3 190521554 ns/iter (± 9509863) 193572978 ns/iter (± 17407071) 0.98
es/full/all/es5 170996170 ns/iter (± 6854663) 174257389 ns/iter (± 6282614) 0.98
es/full/all/es2015 144154599 ns/iter (± 6791857) 145133310 ns/iter (± 6163162) 0.99
es/full/all/es2016 145019080 ns/iter (± 5368859) 143168598 ns/iter (± 7742159) 1.01
es/full/all/es2017 143967554 ns/iter (± 5546123) 137845252 ns/iter (± 4913371) 1.04
es/full/all/es2018 141573922 ns/iter (± 5475309) 137583822 ns/iter (± 4521329) 1.03
es/full/all/es2019 144262956 ns/iter (± 5640827) 135805584 ns/iter (± 4855698) 1.06
es/full/all/es2020 135855008 ns/iter (± 5684862) 129403968 ns/iter (± 3242465) 1.05
es/full/parser 709729 ns/iter (± 67437) 715632 ns/iter (± 19393) 0.99
es/full/base/fixer 29943 ns/iter (± 507) 29776 ns/iter (± 704) 1.01
es/full/base/resolver_and_hygiene 88668 ns/iter (± 3172) 87161 ns/iter (± 3342) 1.02
serialization of ast node 213 ns/iter (± 2) 213 ns/iter (± 1) 1
serialization of serde 227 ns/iter (± 1) 227 ns/iter (± 7) 1

This comment was automatically generated by workflow using github-action-benchmark.

Please sign in to comment.