Skip to content

Commit

Permalink
fix(html/minifier): Fix smart mode (#5058)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Jun 29, 2022
1 parent 93cd38d commit e9bad20
Show file tree
Hide file tree
Showing 58 changed files with 604 additions and 204 deletions.
474 changes: 278 additions & 196 deletions crates/swc_html_minifier/src/lib.rs
View file

Large diffs are not rendered by default.

14 changes: 14 additions & 0 deletions crates/swc_html_minifier/tests/fixture/comment/basic/input.html
View file
Expand Up @@ -79,5 +79,19 @@
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>

<div>a <!-- test --> b <!-- test --> c</div>
<div>

a

<!-- test -->

b

<!-- test -->

c
</div>
</body>
</html>
16 changes: 15 additions & 1 deletion crates/swc_html_minifier/tests/fixture/comment/basic/output.min.html
View file
Expand Up @@ -52,4 +52,18 @@
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br>
<!-- <![endif]-->

</p>

<div>a b c</div>
<div>

a



b



c
</div>
5 changes: 1 addition & 4 deletions crates/swc_html_minifier/tests/fixture/comment/html/output.min.html
View file
@@ -1,4 +1 @@
<!doctype html><html lang=en><title>Document</title><body>

<div>test</div>

<!doctype html><html lang=en><title>Document</title><div>test</div>
3 changes: 3 additions & 0 deletions crates/swc_html_minifier/tests/fixture/comment/spaces/config.json
View file
@@ -0,0 +1,3 @@
{
"collapseWhitespaces": "smart"
}
8 changes: 8 additions & 0 deletions crates/swc_html_minifier/tests/fixture/comment/spaces/input.html
View file
@@ -0,0 +1,8 @@
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<!-- a --> <!-- b --> <!-- c --><link>
</head>
<body><div>foo<div> baz </div> bar</div></body>
</html>
1 change: 1 addition & 0 deletions crates/swc_html_minifier/tests/fixture/comment/spaces/output.min.html
View file
@@ -0,0 +1 @@
<!doctype html><html lang=en><title>Document</title><link><div>foo<div>baz</div>bar</div>
3 changes: 3 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/angular/config.json
View file
@@ -0,0 +1,3 @@
{
"collapseWhitespaces": "smart"
}
22 changes: 22 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/angular/input.html
View file
@@ -0,0 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<template ngFor #hero [ngForOf]="heroes">
<hero-detail *ngIf="hero" [hero]="hero"></hero-detail>
</template>
<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control"
required
ngControl="firstName"
[(ngModel)]="currentHero.firstName">
</div>
<button type="submit" [disabled]="!theForm.form.valid">Submit</button>
</form>
</body>
</html>
1 change: 1 addition & 0 deletions crates/swc_html_minifier/tests/fixture/text/angular/output.min.html
View file
@@ -0,0 +1 @@
<!doctype html><html lang=en><meta charset=UTF-8><title>Document</title><body><template ngfor #hero [ngforof]=heroes><hero-detail *ngif=hero [hero]=hero></hero-detail></template><form (ngsubmit)=onSubmit(theForm) #theform=ngForm><div class=form-group><label for=name>Name</label> <input class=form-control required ngcontrol=firstName [(ngmodel)]=currentHero.firstName></div><button [disabled]=!theForm.form.valid>Submit</button></form>
31 changes: 31 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-all/input.html
View file
Expand Up @@ -255,5 +255,36 @@
<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>

<!--test-->

</div></div>

<pre>
foo
<!-- bar -->
baz
</pre>

<div> a <input> c </div>

<div>Empty <!-- NOT --> </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 <!-- text --><!-- text --> b</div>

<div>a <!-- text --> b <!-- text --> c <!-- text --> d</div>

<div> <!-- test --> text <!-- test --></div>

<span> <!-- test --> text </span>
<span> text <!-- test --> </span>

</body>
</html>
6 changes: 5 additions & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-all/output.min.html
View file
Expand Up @@ -25,4 +25,8 @@

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>ab<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>
</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>
35 changes: 35 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-conservative/input.html
View file
Expand Up @@ -255,5 +255,40 @@
<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><b> foo

</b></div>

<div><div>

<!--test-->

</div></div>

<pre>
foo
<!-- bar -->
baz
</pre>

<div> a <input> c </div>

<div>Empty <!-- NOT --> </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 <!-- text --><!-- text --> b</div>

<div>a <!-- text --> b <!-- text --> c <!-- text --> d</div>

<div> <!-- test --> text <!-- test --></div>

<span> <!-- test --> text </span>
<span> text <!-- test --> </span>

</body>
</html>
6 changes: 5 additions & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-conservative/output.min.html
View file
Expand Up @@ -25,4 +25,8 @@

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</p> </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> <p>test</p> <p>test</p> </div> <div> <p>test</p> <p>test</p> <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</p> </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> <p>foo<img>bar</p> <p>foo <img>bar</p> <p>foo<img> bar</p> <p>foo <wbr> bar</p> <p>foo <br> bar</p> <p>foo <nobr>a</nobr> bar</p> <div> fo o </div> <div> fo o </div> <p></p> <p>a b</p> <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> <p>foo<span></span></p> <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>
</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</p> </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> <p>test</p> <p>test</p> </div> <div> <p>test</p> <p>test</p> <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</p> </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> <p>foo<img>bar</p> <p>foo <img>bar</p> <p>foo<img> bar</p> <p>foo <wbr> bar</p> <p>foo <br> bar</p> <p>foo <nobr>a</nobr> bar</p> <div> fo o </div> <div> fo o </div> <p></p> <p>a b</p> <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> <p>foo<span></span></p> <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><b> foo </b></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>
31 changes: 31 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-smart/input.html
View file
Expand Up @@ -255,5 +255,36 @@
<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>

<!--test-->

</div></div>

<pre>
foo
<!-- bar -->
baz
</pre>

<div> a <input> c </div>

<div>Empty <!-- NOT --> </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 <!-- text --><!-- text --> b</div>

<div>a <!-- text --> b <!-- text --> c <!-- text --> d</div>

<div> <!-- test --> text <!-- test --></div>

<span> <!-- test --> text </span>
<span> text <!-- test --> </span>

</body>
</html>

1 comment on commit e9bad20

@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: e9bad20 Previous: 34f4f5a Ratio
es/full/minify/libraries/antd 1680813186 ns/iter (± 10332486) 1634839099 ns/iter (± 13825717) 1.03
es/full/minify/libraries/d3 422622792 ns/iter (± 8936562) 410032650 ns/iter (± 9858489) 1.03
es/full/minify/libraries/echarts 1671741022 ns/iter (± 24112995) 1630337733 ns/iter (± 22177730) 1.03
es/full/minify/libraries/jquery 95636253 ns/iter (± 2518036) 89618791 ns/iter (± 3513134) 1.07
es/full/minify/libraries/lodash 123188307 ns/iter (± 4672633) 114601428 ns/iter (± 3679547) 1.07
es/full/minify/libraries/moment 53871720 ns/iter (± 702555) 52618122 ns/iter (± 632644) 1.02
es/full/minify/libraries/react 17727787 ns/iter (± 199977) 17468065 ns/iter (± 566219) 1.01
es/full/minify/libraries/terser 607997268 ns/iter (± 13278647) 601639250 ns/iter (± 10519125) 1.01
es/full/minify/libraries/three 560432933 ns/iter (± 12574192) 544878990 ns/iter (± 8595826) 1.03
es/full/minify/libraries/typescript 3545819998 ns/iter (± 48360796) 3459217408 ns/iter (± 86547083) 1.03
es/full/minify/libraries/victory 739994182 ns/iter (± 3833991) 741212870 ns/iter (± 9652920) 1.00
es/full/minify/libraries/vue 143291821 ns/iter (± 1983765) 137228231 ns/iter (± 2996484) 1.04
es/full/codegen/es3 32689 ns/iter (± 792) 31222 ns/iter (± 942) 1.05
es/full/codegen/es5 32666 ns/iter (± 1416) 30723 ns/iter (± 522) 1.06
es/full/codegen/es2015 32717 ns/iter (± 268) 30928 ns/iter (± 389) 1.06
es/full/codegen/es2016 32686 ns/iter (± 254) 31062 ns/iter (± 589) 1.05
es/full/codegen/es2017 32631 ns/iter (± 340) 31060 ns/iter (± 863) 1.05
es/full/codegen/es2018 32661 ns/iter (± 620) 31131 ns/iter (± 609) 1.05
es/full/codegen/es2019 32644 ns/iter (± 737) 31214 ns/iter (± 975) 1.05
es/full/codegen/es2020 32655 ns/iter (± 1025) 31229 ns/iter (± 1059) 1.05
es/full/all/es3 184634285 ns/iter (± 2965726) 188853554 ns/iter (± 6409142) 0.98
es/full/all/es5 172925744 ns/iter (± 3163746) 177650306 ns/iter (± 6671212) 0.97
es/full/all/es2015 140194435 ns/iter (± 2195994) 145049179 ns/iter (± 6301082) 0.97
es/full/all/es2016 139389793 ns/iter (± 1987027) 152992408 ns/iter (± 13944303) 0.91
es/full/all/es2017 138910548 ns/iter (± 2396173) 141013765 ns/iter (± 4578003) 0.99
es/full/all/es2018 137290854 ns/iter (± 2407335) 136860893 ns/iter (± 4709045) 1.00
es/full/all/es2019 137173045 ns/iter (± 3675016) 139119840 ns/iter (± 5360326) 0.99
es/full/all/es2020 131973204 ns/iter (± 3112624) 131736386 ns/iter (± 3957720) 1.00
es/full/parser 710051 ns/iter (± 18475) 714194 ns/iter (± 28558) 0.99
es/full/base/fixer 29213 ns/iter (± 303) 29721 ns/iter (± 787) 0.98
es/full/base/resolver_and_hygiene 86639 ns/iter (± 2309) 87002 ns/iter (± 4052) 1.00
serialization of ast node 214 ns/iter (± 4) 207 ns/iter (± 5) 1.03
serialization of serde 224 ns/iter (± 7) 220 ns/iter (± 3) 1.02

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

Please sign in to comment.