Skip to content

Commit

Permalink
feat(html/minifier): Compress more svg/mathml attributes (#5001)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Jun 20, 2022
1 parent 631b32f commit 1538649
Show file tree
Hide file tree
Showing 14 changed files with 272 additions and 14 deletions.
42 changes: 41 additions & 1 deletion crates/swc_html_minifier/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -473,6 +473,46 @@ impl Minifier {
| (Namespace::HTML, "th", "colspan", "1")
| (Namespace::HTML, "th", "rowspan", "1")
| (Namespace::HTML, "button", "type", "submit")
| (Namespace::SVG, "svg", "xmlns", "http://www.w3.org/2000/svg")
| (
Namespace::SVG,
"svg",
"xlink",
"http://www.w3.org/1999/xlink"
)
| (Namespace::SVG, "style", "type", "text/css")
| (Namespace::SVG, "script", "language", "javascript")
| (Namespace::SVG, "script", "language", "javascript1.2")
| (Namespace::SVG, "script", "language", "javascript1.3")
| (Namespace::SVG, "script", "language", "javascript1.4")
| (Namespace::SVG, "script", "language", "javascript1.5")
| (Namespace::SVG, "script", "language", "javascript1.6")
| (Namespace::SVG, "script", "language", "javascript1.7")
| (Namespace::SVG, "script", "type", "text/javascript")
| (Namespace::SVG, "script", "type", "text/ecmascript")
| (Namespace::SVG, "script", "type", "text/jscript")
| (Namespace::SVG, "script", "type", "application/javascript")
| (Namespace::SVG, "script", "type", "application/x-javascript")
| (Namespace::SVG, "script", "type", "application/ecmascript")
| (Namespace::SVG, "script", "fetchpriority", "auto")
| (
Namespace::SVG,
"script",
"referrerpolicy",
"strict-origin-when-cross-origin"
)
| (
Namespace::MATHML,
"math",
"xmlns",
"http://www.w3.org/1998/math/mathml"
)
| (
Namespace::MATHML,
"math",
"xlink",
"http://www.w3.org/1999/xlink"
)
)
}

Expand Down Expand Up @@ -903,7 +943,7 @@ impl VisitMut for Minifier {
&n.tag_name,
&attribute.name,
match &*n.tag_name {
"script" if n.namespace == Namespace::HTML => {
"script" if matches!(n.namespace, Namespace::HTML | Namespace::SVG) => {
let original_value = attribute.value.as_ref().unwrap();

if let Some(next) = original_value.split(';').next() {
Expand Down
14 changes: 7 additions & 7 deletions crates/swc_html_minifier/tests/fixture/attribute/class/output.min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

<header class="lg:px-20 mb-12 mx-auto text-center">
<h2 class="font-bold leading-normal mb-2 text-2xl text-black">What We Do</h2>
<svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px viewBox="0 0 100 60" style="margin: 0 auto;height: 35px;" xml:space=preserve>
<svg version=1.1 x=0px y=0px viewBox="0 0 100 60" style="margin: 0 auto;height: 35px;" xml:space=preserve>
<circle cx=50.1 cy=30.4 r=5 class=stroke-primary style="fill: transparent;stroke-width: 2;stroke-miterlimit: 10;"/>
<line x1=55.1 y1=30.4 x2=100 y2=30.4 class=stroke-primary style="stroke-width: 2;stroke-miterlimit: 10;"/>
<line x1=45.1 y1=30.4 x2=0 y2=30.4 class=stroke-primary style="stroke-width: 2;stroke-miterlimit: 10;"/>
Expand All @@ -33,7 +33,7 @@ <h2 class="font-bold leading-normal mb-2 text-2xl text-black">What We Do</h2>
<div class="bg-gray-50 border-b border-gray-100 duration-300 ease-in-out hover:-translate-y-2 mb-12 px-12 py-8 transform transition">
<div class="inline-block mb-4 text-gray-900">

<svg xmlns=http://www.w3.org/2000/svg width=2rem height=2rem fill=currentColor class="bi bi-search" viewBox="0 0 16 16">
<svg width=2rem height=2rem fill=currentColor class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
Expand All @@ -47,7 +47,7 @@ <h3 class="font-semibold leading-normal mb-2 text-black text-lg">SEO Services</h
<div class="bg-gray-50 border-b border-gray-100 duration-300 ease-in-out hover:-translate-y-2 mb-12 px-12 py-8 transform transition">
<div class="inline-block mb-4 text-gray-900">

<svg xmlns=http://www.w3.org/2000/svg width=2rem height=2rem fill=currentColor class="bi bi-chat-square-dots" viewBox="0 0 16 16">
<svg width=2rem height=2rem fill=currentColor class="bi bi-chat-square-dots" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
Expand All @@ -62,7 +62,7 @@ <h3 class="font-semibold leading-normal mb-2 text-black text-lg">Social Content<
<div class="bg-gray-50 border-b border-gray-100 duration-300 ease-in-out hover:-translate-y-2 mb-12 px-12 py-8 transform transition">
<div class="inline-block mb-4 text-gray-900">

<svg xmlns=http://www.w3.org/2000/svg width=2rem height=2rem fill=currentColor class="bi bi-badge-ad" viewBox="0 0 16 16">
<svg width=2rem height=2rem fill=currentColor class="bi bi-badge-ad" viewBox="0 0 16 16">
<path d="M3.7 11l.47-1.542h2.004L6.644 11h1.261L5.901 5.001H4.513L2.5 11h1.2zm1.503-4.852l.734 2.426H4.416l.734-2.426h.053zm4.759.128c-1.059 0-1.753.765-1.753 2.043v.695c0 1.279.685 2.043 1.74 2.043.677 0 1.222-.33 1.367-.804h.057V11h1.138V4.685h-1.16v2.36h-.053c-.18-.475-.68-.77-1.336-.77zm.387.923c.58 0 1.002.44 1.002 1.138v.602c0 .76-.396 1.2-.984 1.2-.598 0-.972-.449-.972-1.248v-.453c0-.795.37-1.24.954-1.24z"/>
<path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"/>
</svg>
Expand All @@ -77,7 +77,7 @@ <h3 class="font-semibold leading-normal mb-2 text-black text-lg">Creative ads</h
<div class="bg-gray-50 border-b border-gray-100 duration-300 ease-in-out hover:-translate-y-2 mb-12 px-12 py-8 transform transition">
<div class="inline-block mb-4 text-gray-900">

<svg xmlns=http://www.w3.org/2000/svg width=2rem height=2rem fill=currentColor class="bi bi-card-checklist" viewBox="0 0 16 16">
<svg width=2rem height=2rem fill=currentColor class="bi bi-card-checklist" viewBox="0 0 16 16">
<path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
<path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
</svg>
Expand All @@ -92,7 +92,7 @@ <h3 class="font-semibold leading-normal mb-2 text-black text-lg">Brand Identity<
<div class="bg-gray-50 border-b border-gray-100 duration-300 ease-in-out hover:-translate-y-2 mb-12 px-12 py-8 transform transition">
<div class="inline-block mb-4 text-gray-900">

<svg xmlns=http://www.w3.org/2000/svg width=2rem height=2rem fill=currentColor class="bi bi-wallet2" viewBox="0 0 16 16">
<svg width=2rem height=2rem fill=currentColor class="bi bi-wallet2" viewBox="0 0 16 16">
<path d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"/>
</svg>
</div>
Expand All @@ -106,7 +106,7 @@ <h3 class="font-semibold leading-normal mb-2 text-black text-lg">Budget & Market
<div class="bg-gray-50 border-b border-gray-100 duration-300 ease-in-out hover:-translate-y-2 mb-12 px-12 py-8 transform transition">
<div class="inline-block mb-4 text-gray-900">

<svg xmlns=http://www.w3.org/2000/svg width=2rem height=2rem fill=currentColor class="bi bi-funnel" viewBox="0 0 16 16">
<svg width=2rem height=2rem fill=currentColor class="bi bi-funnel" viewBox="0 0 16 16">
<path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
</svg>
</div>
Expand Down
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/attribute/javascript-prefix/output.min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div type=text onmouseover=myFunction()>test</div>
<div type=text onmouseover=myFunction()>test</div>
<div type=text>test</div>
<svg xmlns=http://www.w3.org/2000/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;">
<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;">
<circle onmouseover="alert('test')" cx=50 cy=50 r=30 style=fill:url(#gradient) />
</svg>

28 changes: 28 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/math/input.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML" xmlns:xlink="http://www.w3.org/1999/xlink">
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
</body>
</html>
22 changes: 22 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/math/output.min.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html><html lang=en><title>Document</title><body>
<math>
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>

6 changes: 6 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/script/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,5 +95,11 @@ <h2>Party coffee cake recipe</h2>
<p>
Preparation time: 20 minutes
</p>
<svg>
<script>
alert("test")
</script>
<script type="application/javascript;version=1.8">alert(1)</script>
</svg>
</body>
</html>
6 changes: 6 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/script/output.min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,11 @@ <h2>Party coffee cake recipe</h2>
<p>
Preparation time: 20 minutes
</p>
<svg>
<script>
alert("test")
</script>
<script>alert(1)</script>
</svg>


7 changes: 7 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/style/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,12 @@
<style type="not/css">
K e E p
</style>
<svg>
<style type="text/css">
a {
color: red;
}
</style>
</svg>
</body>
</html>
7 changes: 7 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/style/output.min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,11 @@
<style>a{color:red}</style><style>a{color:red}</style><style>a{color:red}</style><style type=not/css>
K e E p
</style>
<svg>
<style>
a {
color: red;
}
</style>
</svg>

90 changes: 90 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/svg/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,95 @@
baz" x="10" y="10" width="100" height="100"/>
<circle class="circleClass" cx="40" cy="50" r="26"/>
</svg>

<div class="
small
big
"></div>

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="35" class="
small
big
">My</text>
</svg>

<math>
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi class="
small
big
">b</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css"><![CDATA[
#MyRect {
stroke: black;
fill: red;
}
]]></style>
</defs>
<rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<!-- Example of a polygon with the default fill -->
<polygon id="" points="0,100 50,25 50,75 100,0" />

<!-- Example of the same polygon shape with stroke and no fill -->
<polygon id="" points="100,100 150,25 150,75 200,0"
fill="black" stroke="black" />
</svg>

</body>
</html>
56 changes: 54 additions & 2 deletions crates/swc_html_minifier/tests/fixture/element/svg/output.min.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html><body>
<svg width=120 height=220 viewport="0 0 120 120" version=1.1 xmlns=http://www.w3.org/2000/svg>
<svg width=120 height=220 viewport="0 0 120 120" version=1.1>

<style type=text/css>
<style>

rect.rectClass {
stroke: #000066;
Expand All @@ -18,3 +18,55 @@
<circle class=circleClass cx=40 cy=50 r=26 />
</svg>

<div class="big small"></div>

<svg viewBox="0 0 240 80">
<text x=20 y=35 class="big small">My</text>
</svg>

<math>
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi class="big small">b</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>

<svg version=1.1>
<circle cx=100 cy=50 r=40 stroke=black stroke-width=2 fill=red />
</svg>

<svg width=200 height=200 version=1.1>
<defs>
<style>
#MyRect {
stroke: black;
fill: red;
}
</style>
</defs>
<rect x=10 height=180 y=10 width=180 id=MyRect />
</svg>

<svg viewBox="0 0 200 100">

<polygon points="0,100 50,25 50,75 100,0"/>


<polygon points="100,100 150,25 150,75 200,0" fill=black stroke=black />
</svg>


1 comment on commit 1538649

@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: 1538649 Previous: 1f64055 Ratio
es/full/minify/libraries/antd 1720195478 ns/iter (± 78626837) 1727175888 ns/iter (± 49345255) 1.00
es/full/minify/libraries/d3 429809414 ns/iter (± 19706331) 445457009 ns/iter (± 14736128) 0.96
es/full/minify/libraries/echarts 1660009543 ns/iter (± 81266227) 1731416313 ns/iter (± 42010245) 0.96
es/full/minify/libraries/jquery 101747628 ns/iter (± 6711505) 91864461 ns/iter (± 5247837) 1.11
es/full/minify/libraries/lodash 131590038 ns/iter (± 8780137) 119936854 ns/iter (± 8063044) 1.10
es/full/minify/libraries/moment 57121137 ns/iter (± 1991125) 54363705 ns/iter (± 2911850) 1.05
es/full/minify/libraries/react 18692602 ns/iter (± 376536) 17825109 ns/iter (± 494111) 1.05
es/full/minify/libraries/terser 626017699 ns/iter (± 15191980) 613642144 ns/iter (± 17073712) 1.02
es/full/minify/libraries/three 574387771 ns/iter (± 21485777) 570527363 ns/iter (± 15544673) 1.01
es/full/minify/libraries/typescript 3748189386 ns/iter (± 122781814) 3567409937 ns/iter (± 87977391) 1.05
es/full/minify/libraries/victory 764356001 ns/iter (± 40938727) 751522801 ns/iter (± 6781704) 1.02
es/full/minify/libraries/vue 171156402 ns/iter (± 9823572) 146967034 ns/iter (± 5001953) 1.16
es/full/codegen/es3 31791 ns/iter (± 1183) 32023 ns/iter (± 1106) 0.99
es/full/codegen/es5 31690 ns/iter (± 356) 32061 ns/iter (± 483) 0.99
es/full/codegen/es2015 31691 ns/iter (± 2381) 31949 ns/iter (± 263) 0.99
es/full/codegen/es2016 32081 ns/iter (± 1021) 31597 ns/iter (± 630) 1.02
es/full/codegen/es2017 32042 ns/iter (± 1518) 31305 ns/iter (± 540) 1.02
es/full/codegen/es2018 32268 ns/iter (± 4402) 31293 ns/iter (± 791) 1.03
es/full/codegen/es2019 32386 ns/iter (± 1235) 31390 ns/iter (± 900) 1.03
es/full/codegen/es2020 32132 ns/iter (± 1691) 31303 ns/iter (± 1242) 1.03
es/full/all/es3 202924096 ns/iter (± 15252997) 182243196 ns/iter (± 4271063) 1.11
es/full/all/es5 191503422 ns/iter (± 13423603) 170791250 ns/iter (± 3226003) 1.12
es/full/all/es2015 154483214 ns/iter (± 11451057) 139674472 ns/iter (± 3682959) 1.11
es/full/all/es2016 151577135 ns/iter (± 9821706) 138646305 ns/iter (± 3102989) 1.09
es/full/all/es2017 152282901 ns/iter (± 10003184) 138079304 ns/iter (± 3251590) 1.10
es/full/all/es2018 147270296 ns/iter (± 9104486) 136594507 ns/iter (± 3142364) 1.08
es/full/all/es2019 147783129 ns/iter (± 9754781) 135875461 ns/iter (± 3571986) 1.09
es/full/all/es2020 140488533 ns/iter (± 6798396) 131290040 ns/iter (± 3449335) 1.07
es/full/parser 719978 ns/iter (± 31589) 702072 ns/iter (± 26429) 1.03
es/full/base/fixer 30015 ns/iter (± 5310) 29316 ns/iter (± 398) 1.02
es/full/base/resolver_and_hygiene 87799 ns/iter (± 33946) 86352 ns/iter (± 1366) 1.02
serialization of ast node 206 ns/iter (± 6) 208 ns/iter (± 4) 0.99
serialization of serde 219 ns/iter (± 16) 216 ns/iter (± 5) 1.01

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

Please sign in to comment.