-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
1382 lines (1267 loc) · 60.8 KB
/
index.html
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
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mako - Extremely fast, Production-grade web bundler</title>
<link rel="icon"
href="https://img.alicdn.com/imgextra/i4/O1CN01dvFN0j1e2rYBJpJGJ_!!6000000003814-2-tps-2048-2048.png_240x240.jpg" />
<style>
/* https://cdn.bootcdn.net/ajax/libs/reseter.css/2.0.0/minireseter.min.css */
*,
::after,
::before {
box-sizing: inherit;
padding: 0;
margin: 0
}
html {
box-sizing: border-box
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400
}
ul {
list-style: none
}
img,
video {
height: auto;
max-width: 100%
}
iframe {
border: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
a {
text-decoration: none;
color: inherit
}
</style>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.container {
background: #1b1725;
overflow: hidden;
}
.container .tip {
color: #fff;
font-size: 18px;
font-weight: 500;
text-align: center;
padding-top: 20px;
}
.container .tip:hover {
text-decoration: underline;
}
.container .navbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
margin: 20px 48px 0;
padding: 0 42px 0 10px;
border: 1px solid rgba(151, 151, 151, 0.28);
border-radius: 14px;
}
.container .navbar .left .title {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 14px;
}
.container .navbar .left,
.container .navbar .right {
display: flex;
align-items: center;
}
.container .navbar .right a {
color: #ffffffad;
font-size: 18px;
margin-right: 2rem;
text-decoration: none;
}
.container .navbar .right a:hover {
color: #fff;
}
.container .navbar .right a:last-child {
margin-right: 0;
}
.container .navbar .right .language {
font-size: 18px;
color: #ffffffa6;
font-weight: 500;
margin-right: 2rem;
}
.container .navbar .right .language .active {
color: #a8b2ff;
}
.container .navbar .right .language a {
margin-right: 0;
}
.container .navbar .right .github {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: bottom;
}
.footer {
background: #24202e;
border-top: 1px solid #2c2735;
padding: 60px 0 40px;
opacity: 0.7;
}
.footer .top {
display: flex;
padding-left: 100px;
padding-right: 225px;
}
.footer .top .left {
display: flex;
}
.footer .top .left img {
height: 32px;
}
.footer .top .left sup {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 14px;
line-height: 32px;
}
.footer .top .right {
margin-left: 25%;
display: flex;
flex: 1;
justify-content: space-between;
}
.footer .top .right .sitemap-col h4 {
font-size: 24px;
color: #ffffff3f;
font-weight: 500;
margin-bottom: 24px;
}
.footer .top .right .sitemap-col ul>li {
margin-bottom: 12px;
}
.footer .top .right .sitemap-col ul>li a {
color: #fbfbfb;
font-size: 16px;
text-decoration: none;
}
.footer .top .right .sitemap-col .rss {
width: 22px;
height: 22px;
vertical-align: middle;
}
.footer .copyright {
width: 100%;
font-size: 16px;
color: rgba(255, 255, 255, 0.65);
display: inline-block;
margin-top: 48px;
text-align: center;
}
@media (max-width: 768px) {
.container .tip {
font-size: 14px;
}
.container .navbar {
flex-direction: column;
height: auto;
padding: 20px;
margin: 20px 20px 0;
}
.container .navbar .left,
.container .navbar .right {
justify-content: center;
margin-bottom: 10px;
}
.container .navbar .right .language {
display: flex;
align-items: center;
}
.footer .top {
padding: 0 20px;
}
.footer .top .left {
display: none;
}
.footer .top .right {
margin-left: 0;
justify-content: space-around;
}
.footer .right .sitemap-col:last-child {
display: none;
}
}
</style>
<style>
.hero {
padding: 100px 0 128px;
text-align: center;
}
.hero .tagline {
color: #fff;
font-size: 48px;
}
.hero .tagline .accent {
background-image: linear-gradient(90deg, #4b68cd 3%, #7246e0 100%);
display: inline-block;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.description {
max-width: 994px;
line-height: 1.4;
color: #b0a9c4;
font-size: 20px;
margin: 30px auto 40px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.description a {
text-decoration: underline;
}
.actions {
font-size: 20px;
color: #fff;
display: flex;
justify-content: center;
}
.actions .get-started {
background-image: linear-gradient(90deg, #455eb7 -12%, #6c41d3 100%);
border-radius: 8px;
margin-right: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 182px;
height: 53px;
transition: opacity 0.2s;
}
.actions .get-started:hover {
opacity: 0.7;
}
.actions .install-mako {
background-image: linear-gradient(90deg, #32273b -5%, #352748 60%, #2e2733 112%);
border: 1px solid rgba(151, 151, 151, 0.28);
border-radius: 8px;
padding: 8px 18px;
font-family: "Fira Code", "Hack", "Source Code Pro", "SF Mono", "Inconsolata", monospace;
display: flex;
align-items: center;
justify-content: space-between;
width: 324px;
height: 53px;
}
.actions .copy {
cursor: pointer;
background-color: inherit;
border: none;
color: #fff;
display: flex;
}
.highlights {
text-align: center;
padding-bottom: 128px;
}
.highlights h1 {
font-size: 48px;
font-weight: bolder;
color: #929ef4;
}
.highlights h1+.description {
margin-top: 8px;
}
.highlights .box-container {
max-width: 1278px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.highlights .box-container .box {
position: relative;
background: #24202e;
border: 1px solid #2c2735;
border-radius: 8px;
padding: 12px 25px;
width: 388px;
height: 350px;
text-align: left;
transition: background 0.3s;
}
.highlights .box-container .box::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-image: radial-gradient(ellipse 100% 100% at 50% 50%, #553c62 0%, #2f1d45 47.02%, #24202e 100%);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.highlights .box-container .box>* {
position: relative;
}
.highlights .box-container .box h2 {
font-size: 22px;
color: #fff;
margin: 0 0 10px;
font-weight: 500;
}
.highlights .box-container .box p:first-child {
color: #fff;
font-size: 4rem;
}
.highlights .box-container .box p {
font-size: 16px;
color: #9691a2;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
overflow: hidden;
}
.highlights .box-container .box:nth-child(-n+3) {
margin-bottom: 40px;
}
.highlights .box-container .box:hover {
background: transparent;
}
.highlights .box-container .box:hover::before {
opacity: 1;
}
.tabs .tab-nav {
display: flex;
justify-content: center;
margin: 0 auto;
}
.tab-btn {
padding: 10px 24px;
border: 2px solid transparent;
border-bottom: none;
cursor: pointer;
margin-right: 32px;
font-size: 20px;
color: #ffffff9a;
background-color: inherit;
position: relative;
z-index: 1;
box-sizing: border-box;
}
.tab-btn:hover {
color: #fff;
}
.tab-btn.active {
color: #fff;
background-image: linear-gradient(90deg, #2e2733 -17%, #38274e -17%, #31273b -1%, #31273a 34%, #38274f 66%, #2e2734 91%, #2e2733 104%);
border-top-right-radius: 8px;
border-top-left-radius: 8px;
border: 2px solid #493c56;
border-bottom: none;
box-sizing: border-box;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.benchmark-container {
padding: 96px;
background-image: linear-gradient(90deg, #2e2733 -17%, #38274e -17%, #31273b -1%, #31273a 34%, #38274f 66%, #2e2734 91%, #2e2733 104%);
border: 1px solid #493c56;
border-radius: 8px;
max-width: 1240px;
margin: 0 auto;
margin-top: -1px;
}
.benchmark-item {
display: flex;
align-items: center;
height: 33px;
margin-bottom: 20px;
}
.benchmark-title {
font-size: 22px;
color: #ffffffcc;
font-weight: 300;
width: 120px;
padding-right: 14px;
text-align: right;
}
.benchmark-w {
flex: 1;
padding: 6px 0;
}
.benchmark-bar,
.benchmark-bar-current {
height: 33px;
background-image: linear-gradient(90deg, #75617c -23%, #473458 220%);
border-radius: 4px;
width: 0%;
}
.benchmark-bar-current.mako {
background-image: linear-gradient(90deg, #4d58bd -16%, #6c42d3 100%);
}
.benchmark-bar-current.no-mako {
background: #8d6b9e;
}
.benchmark-time {
margin-left: 15px;
width: 50px;
font-family: Georgia;
font-size: 20px;
color: #ffffffcc;
text-align: center;
}
.benchmark {
margin-top: 28px;
font-size: 18px;
color: #ffffffcc;
line-height: 1.5;
text-align: center;
}
.benchmark a {
text-decoration: underline;
color: #ffffffcc;
}
.user-container {
max-width: 1240px;
margin: 0 auto;
margin-top: 50px;
display: flex;
justify-content: center;
}
.user-container .user {
display: flex;
align-items: center;
margin-right: 56px;
}
.user-container .user .user-name {
margin-left: 6px;
color: #fff;
text-align: left;
}
@media (max-width: 768px) {
.hero .tagline {
font-size: 32px;
}
.description {
font-size: 18px;
padding: 0 20px;
}
.actions {
font-size: 14px;
padding: 0 20px;
}
.highlights .box-container {
flex-direction: column;
align-items: center;
}
.highlights .box-container .box {
width: 90%;
margin-bottom: 20px;
}
.tabs .tab-nav {
flex-direction: column;
width: 90%;
}
.tab-btn {
margin-right: 0;
margin-bottom: 10px;
font-size: 18px;
border: 2px solid transparent;
}
.tab-btn.active {
border: 2px solid transparent;
}
.benchmark-container {
width: 90%;
padding: 36px 10px;
}
.benchmark-item {
padding: 0 24px;
height: auto;
margin-bottom: 10px;
}
.benchmark-title {
width: 90px;
}
.benchmark-title,
.benchmark-time {
font-size: 18px;
}
.benchmark-w,
.benchmark-bar,
.benchmark-bar-current {
width: 100%;
}
.user-container {
padding: 0 20px;
}
.user-container .user {
margin-right: 5px;
}
}
</style>
<script src="https://gw.alipayobjects.com/os/lib/react/18.3.1/umd/react.development.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/react-dom/18.3.1/umd/react-dom.development.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/dayjs/1.11.12/dayjs.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/antd/5.20.1/dist/antd.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/lottie-web/5.12.2/build/player/lottie.js"></script>
<script src="/assistant.min.js"></script>
<link rel="stylesheet" href="/assistant.min.css">
</head>
<body>
<div class="container">
<p class="tip"><a href="/blog/mako-open-sourced">Mako is open sourced! Check out the release article →</a></p>
<div class="navbar">
<div class="left">
<img src="https://img.alicdn.com/imgextra/i4/O1CN01dvFN0j1e2rYBJpJGJ_!!6000000003814-2-tps-2048-2048.png"
width="32" height="32" alt="Logo" />
<sup class="title">Mako</sup>
</div>
<nav class="right">
<a href="/docs">Docs</a>
<a href="/blog">Blog</a>
<div class="language">
<a href="/zh-CN/">中</a>
<span>｜</span>
<span class="active">EN</span>
</div>
<a class="github" href="https://github.com/umijs/mako">
<img
src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMEMzLjU4IDAgMCAzLjU4IDAgOEMwIDExLjU0IDIuMjkgMTQuNTMgNS40NyAxNS41OUM1Ljg3IDE1LjY2IDYuMDIgMTUuNDIgNi4wMiAxNS4yMUM2LjAyIDE1LjAyIDYuMDEgMTQuMzkgNi4wMSAxMy43MkM0IDE0LjA5IDMuNDggMTMuMjMgMy4zMiAxMi43OEMzLjIzIDEyLjU1IDIuODQgMTEuODQgMi41IDExLjY1QzIuMjIgMTEuNSAxLjgyIDExLjEzIDIuNDkgMTEuMTJDMy4xMiAxMS4xMSAzLjU3IDExLjcgMy43MiAxMS45NEM0LjQ0IDEzLjE1IDUuNTkgMTIuODEgNi4wNSAxMi42QzYuMTIgMTIuMDggNi4zMyAxMS43MyA2LjU2IDExLjUzQzQuNzggMTEuMzMgMi45MiAxMC42NCAyLjkyIDcuNThDMi45MiA2LjcxIDMuMjMgNS45OSAzLjc0IDUuNDNDMy42NiA1LjIzIDMuMzggNC40MSAzLjgyIDMuMzFDMy44MiAzLjMxIDQuNDkgMy4xIDYuMDIgNC4xM0M2LjY2IDMuOTUgNy4zNCAzLjg2IDguMDIgMy44NkM4LjcgMy44NiA5LjM4IDMuOTUgMTAuMDIgNC4xM0MxMS41NSAzLjA5IDEyLjIyIDMuMzEgMTIuMjIgMy4zMUMxMi42NiA0LjQxIDEyLjM4IDUuMjMgMTIuMyA1LjQzQzEyLjgxIDUuOTkgMTMuMTIgNi43IDEzLjEyIDcuNThDMTMuMTIgMTAuNjUgMTEuMjUgMTEuMzMgOS40NyAxMS41M0M5Ljc2IDExLjc4IDEwLjAxIDEyLjI2IDEwLjAxIDEzLjAxQzEwLjAxIDE0LjA4IDEwIDE0Ljk0IDEwIDE1LjIxQzEwIDE1LjQyIDEwLjE1IDE1LjY3IDEwLjU1IDE1LjU5QzEzLjcxIDE0LjUzIDE2IDExLjUzIDE2IDhDMTYgMy41OCAxMi40MiAwIDggMFoiIHRyYW5zZm9ybT0ic2NhbGUoNjQpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"
alt="GitHub logo" />
</a>
</nav>
</div>
<main>
<section class="hero">
<h1 class="tagline">An
<span class="accent">extremely fast</span>, <span class="accent">production-grade</span><br /> web bundler
based on <span class="accent">Rust</span>.
</h1>
<p class="description">
Mako is a new web bundler for Web App, Library, and Framework. It's designed to be fast, reliable, and easy to
use. It has been used in hundreds of projects in production by Ant Group, and other companies. If you are
looking for a modern web bundler, Mako is the right choice.
</p>
<p class="actions">
<a class="get-started" href="/docs/getting-started">Getting Started</a>
<a class="install-mako">
<code>$ <span class="content">npm create mako</span></code>
<button class="copy">
<svg viewBox="64 64 896 896" focusable="false" data-icon="copy" width="1.5em" height="1.5em"
fill="currentColor" aria-hidden="true">
<path
d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z">
</path>
</svg>
</button>
</a>
</p>
</section>
<section class="highlights">
<h1>Why Mako</h1>
<p class="description">
Mako has a lot of features that make it different from other bundlers. Here are some of the highlights,
checkout <a href="/docs/features">Features</a> for more details.
</p>
<div class="box-container">
<div class="box">
<p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="64px" height="64px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<image id="image0" width="128" height="128" x="0" y="0"
xlink:href="data:image/png;base64,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" />
</svg>
</p>
<h2>Zero Config</h2>
<p>Start with a JS/TS file, and Mako will handle the rest. TypeScript, Less, CSS, CSS Modules, React,
Images, Fonts, WASM, Node Polyfill and more are supported out of the box. No need to configure loaders,
plugins, or anything else.</p>
</div>
<div class="box">
<p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="48px" height="54px" viewBox="0 0 74 96" enable-background="new 0 0 74 96" xml:space="preserve">
<image id="image0" x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABgCAMAAACNORQTAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
AAB1MAAA6mAAADqYAAAXcJy6UTwAAAHsUExURQAAAP////Ly7fLw7fLw7fLv7PLw7fLw7fLw7fLw
7fPz7PLw7vPw7fPw7fPz8/Hx7PPw7u7u7vPv7vLw7fT06fLw7fLw7f////Hx7PLw7fLy6/Hw7PPw
7vHx7PLw7f////Lw7ebm5vLv7fHx8fLw7ejo6P////Pw7fLw7fLw7O/v7/Hx7vLw7fLw7fLx7fLx
7fLv7fHw7fLw7fHx6u7u7vLx7vTu7vLw7fPv7PLw7fTu7vLx7fLv6/Tv7/Lv7fLw7vLw7fDw8PLw
7e/v7/Lw7fPx7evr6/Lw7fHw7fLw7fLv7fHx7PLx7PLy8vHw7fLw7fbt7fLw7fDw8PPz6PPw7PLw
7fHv7fLw7f//////3/Lw7fHx7PPx7PHv7fX16/Lv7fPv7vPw7PLw7PHx7vTw7P////Lv7fHw7PLw
7fHw7fLu7vHx7vLw7fPx7fDw7fLv7fLw7fHw7PLw7fXr6/Lw7PLw7PLw7fPw7fLx7fPw7vHw7fPx
7PDw7fLw7vLy7vLy7vLw7fLv7PHx7fLw7vDw8PLx7vPt7fLw7fPz7fLy7fHx7vLv7PDw6/Xv7//j
4/Lw7fLu7vPx7fPw7fHx6v////bt7fPv7PLv7PLw7fPw7fPw7fLw7O3t7fTw7PLw7vLv7fLw7fLw
7fLw7f///9vJYy4AAACidFJOUwAGOmWMs9Lf7PkpeLr1FW7MHpP3F5z6A23wJ87NXfMEmgq0EscL
Bbj9iSBc2befjmHiYyQPoS72UvEt1E4w5nfdItof8n0N6KjrYjWyE8+uHfsRFnvLb70BCOQ3a4MZ
xZKl+ElEB8SV/rxNW9Z/RdXjlqsawOrgU41mqXxG20w70U9IvyGwK+4qOUtQMjEJmDx+piUCHKSj
i1e53A5DvnK21wluzXgAAAABYktHRAH/Ai3eAAAAB3RJTUUH6AcCBiowY9Wn4gAAA3RJREFUWMPt
2WdD00AYB/CHPVs2lL2xQEVliIiKSq2Ai1qKCBakooALEEVklo2gIEsZsu6T2iT00pncXfOCF/7f
3dPcr8lxzV0CgEQCAoOCQ0LDwiMiwsNCQ4KDAgOAKZFR0SrkFlV0VCSto46JRT4SG6OmgOLiE5BE
EuLjCKHEpGQkk+SkRAIoRZMqB3FJ1aTISWnpJBCXjDRpKTOLVEIoK1MCys4hh7jkZPuScvPoJITy
cr1L+QW0EkIF+d6kQgbJbhV6SkUX5Ptpi0vUpTrX2sUiD6qM4BQu8RPv8hWXYpm7VE5yNRXCsZVV
LtVyV+lqNQlV6Tj8Wo1Ttfq6y0DVEo3xDdzh5i2ncq3zcNURSej2Hdyj5K5TvU6U6lVkFNLfM2Dr
vlhW1WOqgVCyp7HJ0emB0/c34LuBlpxC6OGjs26lYk3ruEtU0UgIPXb8WJ6ItSqh0myko1DGU6Gj
qRGXjM18pYVSQsh8NsFaxVILX9BRU+hZG9/zeTuu6Lh2B72EkEY4rRdipcPetLBQqk6eMogTwmJv
drFQ6KVwWt240GWHaf9+QqwmnnqFC0YD9DBJCLXy1GsrLvSAhpGKFa7wDS5ooJeR6hN+P8W40Av9
jBR6y1PvcLsf3rNSH3jqI24PwCArNSTcTnF7EIj2Ld7yiaeGcTsV2KaVPZ+F2YDbRqhhpb7wVAVu
18AIK4W+ctQobo4A8dbMI/pv6pJi8V6ezj6v3NMPY0pRYzCuFDUOE0pRE5CvFGVf0iaVkSbpF1Rf
4RbVKWWoKW5vFa6EFM7vsYaUoIRbzrQS1DRPtdn8l2zCyg8z/lMzjr2a2V/JjDeQs/5Ss+K+ds4/
ac5psz2v90fSzzs/AzT5QzWBSxbYpQW3xyU189I66PEGY3GJTVpaBo8Ekj6duET1HbxkhWGhNq6A
16xSn5dqFXzkRzud1P4TfGaY6tdo7gSJrK33kUJ962sgnV+E28CBaZBNwIZVHrJukL3225SnNomg
/xQTpR3d2hbL21ujWmbK4v6JhZnacf9k5zxQCl6ggsN+PufVuaJ+yw/7H0JqV34y7BJS+NWD7ymq
IaQW5alFQgpschdoI5VgT27Y94gp2JeeCvvkEpgkX9rpTBQUxB34lg5I/yF0lr/dvqRuA51kz+GR
N+jokBrisnx8cuq0rVw6PTleljj8H7MAd0kBP6M0AAAARGVYSWZNTQAqAAAACAABh2kABAAAAAEA
AAAaAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAABKoAMABAAAAAEAAABgAAAAALW8su0AAAAl
dEVYdGRhdGU6Y3JlYXRlADIwMjQtMDctMDJUMDY6NDI6NDgrMDA6MDA+z2clAAAAJXRFWHRkYXRl
Om1vZGlmeQAyMDI0LTA3LTAyVDA2OjQyOjQ4KzAwOjAwT5LfmQAAACh0RVh0ZGF0ZTp0aW1lc3Rh
bXAAMjAyNC0wNy0wMlQwNjo0Mjo0OCswMDowMBiH/kYAAAATdEVYdGV4aWY6Q29sb3JTcGFjZQAx
LCCMM8NiAAAAFHRFWHRleGlmOkV4aWZPZmZzZXQAMjYsIGPUV6QAAAAZdEVYdGV4aWY6UGl4ZWxY
RGltZW5zaW9uADc0LCAePEq9AAAAGXRFWHRleGlmOlBpeGVsWURpbWVuc2lvbgA5NiwgRJwyCAAA
AABJRU5ErkJggg==" />
</svg>
</p>
<h2>Production Grade</h2>
<p>Mako is reliable. It’s used in hundreds of projects at Ant Group, like Web App，Hybrid App, Mini Program
(Partly), Low Code,
Serverless, Library Development, Ant Design and others. We have also tested Mako in thousands of old
projects, and thousands of npm packages
and it’s different versions to ensure the compatibility.</p>
</div>
<div class="box">
<p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="49px" height="49px" viewBox="0 0 98 98" enable-background="new 0 0 98 98" xml:space="preserve">
<image id="image0" width="98" height="98" x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAMAAACce/Y8AAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
AAB1MAAA6mAAADqYAAAXcJy6UTwAAAKjUExURQAAAO7u7vPw7fLw7PLw7fHw7fLw7fLw7PLw7fLw
7fHw7PPw7f//////3/Hx7vHw7PLw7fLw7fLv7f////Tw7PLv7vLw7fLw7e/v7/X16/Hv7fPw7fDw
6/Lv7PLw7fLv7fLw7fLw7fTw7PLx7fHx7vLy7fLv7fLw7fHx6vLw7fHx8fPv7fLw7PLw7fLw7fXv
7/Lw7fLw7evr6/Pv7vLw7fLw7fLx7PLw7fLx7vLw7fHx7fLw7fPv7PPu7vPz7PLx7fPw7vLx7vLw
7fDw7fPv6/Lw7fLv7PPw7fDw6/Lw7fLw7vLw7fHx7vLv7PLu7vLw7fLx7f////T06v////Lw7PLw
7vHx7PLw7vDw8PLx7fPw7fLw7fPz8+rq6v/j4/Lw7f////Lw7fTu7vHx6vLy7vHx7PHx7PPw7PLw
7vHv7fHx7vXr6/Lx7fLv7fLy7PLw7fLw7fPv7u7u7vDw8PPw7fPt7fLw7fLw7fLw7e/v7/Lw7fTu
7vLw7fPz6PLy8vLw7fDw8PHw7vHw7PTv7/Lw7fTv7/Hw7fLw7fPx7fHv7fLw7fDw6/Hx7PT06fHx
7PPw7vLy6/Hx7fLw7fLy7fbt7fHx7PLx7fLw7fLy6/Px7PLw7fPv7/Hw7P////Lw7vHw7fLv7fDw
8PHv7fHw7fLw7fPw7vLw7fLu7vPz7f////Lw7fLx7ujo6PLv7fLw7PLw7e/v7/Px7fLx7fLw7fPw
7vLw7fLw7e3t7fLw7PHx7vLw7ebm5vLw7fLw7vLv7PPw7fLv7fPx7vLw7fLv6/Lw7fPw7fLv7PLx
7fLy7vPw7vPw7fPv7PLv7PHx7fLw7fLw7fLw7vPv6/Px7PPw7PLw7fLw7fLw7vDw7fLu7vLw7fHx
7vHx7PPw7fHx7vHv7vLw7f///yGbU28AAADfdFJOUwAeU4i1z+n48cqWVwYISZXg53IBQ6L0thAZ
guEzo/pzwehEw1k6xJgkrBKR6mPrMcf3DZP93bKesdpI/qQsKZ/Noe9GQOxR9TLyhmVbTzze1AIY
BYd2bdshjlTwFQwJ7gTQLiVMbjdCd4BaGsLVKNHWkg8RVSv8yN8f4y2LFhP2IoSXMK0vqe2Qb9g0
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" />
</svg>
</p>
<h2>Blazing Fast</h2>
<p>Mako is designed to be blazing fast. We use Rust for the core bundling logic, and we use workers in
Node.js with piscina to compile files in parallel. We have spend lots of time optimizing the performance
of Mako. And Mako is faster than other Rust bundlers and Webpack in benchmark case.</p>
</div>
<div class="box">
<p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="52px" height="47px" viewBox="0 0 104 94" enable-background="new 0 0 104 94" xml:space="preserve">
<image id="image0" width="104" height="94" x="0" y="0" xlink:href="data:image/png;base64,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
OTQsIEcY5mYAAAAASUVORK5CYII=" />
</svg>
</p>
<h2>Hot Module Replacement</h2>
<p>When files change, Mako will automatically update your code in the browser. No need to refresh the page
manually. And mako has integrated React Fast Refresh, when you change a React component, it will only
update the component, not the whole page.</p>
</div>
<div class="box">
<p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="43px" height="47px" viewBox="0 0 86 94" enable-background="new 0 0 86 94" xml:space="preserve">
<image id="image0" width="86" height="94" x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAABeCAMAAACO2xOoAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
AAB1MAAA6mAAADqYAAAXcJy6UTwAAAGkUExURQAAAPHx6vLw7PLy6/Lv7PLw7fPw7v///+7u7vHw
7fLw7fLy7vLw7fLw7fTw7P////Px7fLw7fLx7fLy8u/v7/Lx7fLw7fPw7fLw7fLw7PHx7Ojo6PLw
7fLv7Ovr6/Dw6/Lw7fLw7fHx7v////Lv7fLw7fLw7fDw8PT06vPw7fLw7fLw7v////Hx7vLw7PLw
7fPv6/////Pv7vLw7fHx8fPz7fLw7fLw7fPw7vPw7vLw7fPz7PLy8vLx7vPv7fTw7PLv7fLw7fTu
7vPv6/Lw7fLw7fHx7vLx7fLw7fX16/Lw7vPw7fT06f//3+bm5vDw8PLw7fLw7fLx7fPw7P////Hx
7PLw7fLw7fXv7/Lx7vLw7PPt7e3t7fPw7PLw7fLw7fPw7vHv7fPz6PHx7fLw7fPw7fLw7fLv7fPw
7f/j4/Pw7PLx7e7u7vPv7/bt7fXr6/Lw7fHw7vLy6/Pv7PLw7fLy7fTv7/Lw7fPx7PLw7fDw7fPw
7fTv7/Lw7fLw7fHv7fLw7PLw7vLw7fHv7fLw7fLv7fPw7vDw8PLv7fLw7fLw7f///6ylONsAAACK
dFJOUwAlwCZg9MwFD6iKO+D+RAN+/OUUH8OsVu/cNgudow0y2fFbAXP5xyIYuv2FBEvq40AHkq4S
KtL2Z2nQKROwkUPmiy5B5OlKn9EZhrgXCAojyfOgQgJd8tgxsYgrDqWc+s1vFjjeVPu0Vwl7wh4/
HBp0hCdS7jovjGuaRlMw15hw+HXdgLfFaBHE93CWUYcAAAABYktHRAcWYYjrAAAAB3RJTUUH6AcC
BxQu2d3rywAAAftJREFUWMPt1+lXElEYBvCL4cYiTlpQiAkDlWMlFDnlnntB6hS4tGBa0UorLa6Z
huL9q0U8h3eGGWgGr594n4/3eefHcO+cw0CIzphqzugdNRBzLa2rZ402NNJcLIxVq+1IpfYmlqij
maPHOdvCTm09Rws5z0x1ukC9cJER6m4DlHraGamXOgD1+hihvD8A6uUrjNSrnYAKXdcYqddvgNod
ZISGbsrO6laYkXq7B1DxDiOU3BVB7e2Ddd5xArR/QLYBgyFZMzR8b6RSdXQM0PEJRTWZW5ry368A
rX8ggBqJKrqH3vwqF/FNG1RnZgEN+Hll6SxU0qPHMQNqfA7U+YXidlG257T7yVOd6LPnsssS7uI6
vESVebG8okN9+QqucL1W90O1tDjJN2/flUdj75Mw/uGj1og73imoZG8ixZdWP9XAJNdc8rH//GVK
BVPb128lxr+nZVM/yn6tn7+G1fLsb43fuelV2URjw/8OwbHmUW/z0uJ6SDm2sQmtZNZxuCW2Ob1l
hQn+zzY0dSZdan6b//aoYLqzO3PcRv/Bot1i7IVIc5sze/uESPJnXJCMRqQa4SRCTyXIIossssgi
iyyyyLJltV4dka1GVtdHI4ssshWx5f+uI1s9rIEbQBZZZAuseHJDHZFkT4PNkpSdvSqkCAlmDtii
B5kgOQRfrDRemvzA8AAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAAB
AAEAAKACAAQAAAABAAAAVqADAAQAAAABAAAAXgAAAAAp5EUmAAAAJXRFWHRkYXRlOmNyZWF0ZQAy
MDI0LTA3LTAyVDA3OjIwOjQ2KzAwOjAwXybfgwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNC0wNy0w
MlQwNzoyMDo0NiswMDowMC57Zz8AAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjQtMDctMDJUMDc6
MjA6NDYrMDA6MDB5bkbgAAAAE3RFWHRleGlmOkNvbG9yU3BhY2UAMSwgjDPDYgAAABR0RVh0ZXhp
ZjpFeGlmT2Zmc2V0ADI2LCBj1FekAAAAGXRFWHRleGlmOlBpeGVsWERpbWVuc2lvbgA4NiwgRduO
hQAAABl0RVh0ZXhpZjpQaXhlbFlEaW1lbnNpb24AOTQsIEcY5mYAAAAASUVORK5CYII=" />
</svg>
</p>
<h2>Code Splitting</h2>
<p>Mako has built-in support for code splitting. You can use dynamic imports to split your code into
separate bundles. Resulting in smaller initial bundle sizes and faster load times. Mako has a
codeSplitting config that you can use to customize the behavior of code splitting.</p>
</div>
<div class="box">
<p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="48px" height="48px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
<image id="image0" width="96" height="96" x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
AAB1MAAA6mAAADqYAAAXcJy6UTwAAAEyUExURQAAAPHx7fPw7fLw7fLw7fLx7vHx7P////Hw7PLw
7fLv7fPw7ebm5vLu7vLx7fLw7fLw7fLx7fLw7vTu7vPw7Ojo6PPx7PLw7fLw7fPw7PHx6vLw7fLw
7fHx7PLw7fLx7v////Lx7PLv7PLw7fLw7fLy7f////Ly7vLw7fLx7fLw7fPv7/Pu7vHw7fLx7fLw
7fLw7fHw7fLy7vLw7fLw7f/j4/Pv7/Lw7PLv7fLw7fHx6vDw6/Lu7vDw6/Hw7PHw7fLw7PLu7vLy
6+vr6/Lw7fHw7vLw7e7u7vLw7fLw7PHx7vLw7fPw7fLv7fLw7fLw7P////Lw7fHx7vHx7fLw7fLw
7fLw7e/v7/Lw7fLw7fLw7fLy6/Hv7fLw7fLw7fPx7vLw7fDw7fPw7fLx7fLw7f///+fTydcAAABk
dFJOUwBHuOnjsDUDl/xypgpNjqq2oHctpQt88MlCJdeMNu6xBrKz8qw6ATvzjf4/LKefmLWpTK3v
CT561e0kND0zlqjAPCcN2YT7D/SJWZy5tMiIBN5bOPGryhDL+tgmg8ebWJlGuuU62Nm6AAAAAWJL
R0QHFmGI6wAAAAd0SU1FB+gHAgcULtnd68sAAAKCSURBVGje7dlrWxJBFMDxIwgLQllmIaWxgYJi
ZOV2v2la2t0s7er9fP/P0BJRO7szw+ycOY+9YF4OD78/s+zO7gMATGMkkx3N5bl08ArYHcUxLr+E
vVHkWcNfHzHH7OMos49ZZh8zzD6OMPsFilU+c3b83PmJCxp/0rPnL16q/FGmqhz+5SsRaNpz7s9c
Faia79qvoDiu+bw+Yt3n9cOCOz8v82Nj6A/90/LF878xKw3UfUefvzHXLLgtxPwWgNuCeHzmW905
RaFm8zXkJb6ysED124v9eUWhSvMRS56+MEX0BxeuE33Ejr4wQfUHreEG2RfWsJR48SbdF9aQKNxy
4GsLxleCfv9UF24b+uL+0NYVlqPzwR2bz9+4W1IX5hrR6XtWfiv+7BYpiP79soX/e39TFUT/wUNb
X1UQ/eCRvS8vPKb7uNwEdUE4u4InRn7i+bbwr9BBzTD0JdeXWcHu+JgXKL5JwdCfUe0/TwcUqL5Q
eMbh6wsufF3Byp9f0RQW23R/1a8rC1b7T9wHUBas/OdB3FcWrPy19aSvKFj58CL6pper/WlJYdbK
39gUkFegKdj48Dr2RsOCsQ9v0KZg7sNb1BTe0X14j+kLaXyoYepCKh8WMG0hnQ9V6UH4oC6k9GHr
46DCCskH2EZ94dNnmg/NHW2B7AOUdzUFBz7Al6/KghNfU3DkqwvfHPnS5534IPml0/crhL/ehv5/
5Xdk10Pgzp/0JFecw/Oz+/tzouDYDwvi3ur0+PSmy9H7w/cfzv3wDrTdv4tu/lxj8MOxVZ2u7WX2
DzbseYBDte9kHDH7cMzsQ5bZhxNmH3LMPuSLvD7AWK9wyOWHa8idZI+PuPRfgU3JUTqabCEAAABE
ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAGCg
AwAEAAAAAQAAAGAAAAAAqTNfTgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyNC0wNy0wMlQwNzoyMDo0
NiswMDowMF8m34MAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjQtMDctMDJUMDc6MjA6NDYrMDA6MDAu
e2c/AAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDI0LTA3LTAyVDA3OjIwOjQ2KzAwOjAweW5G4AAA
ABN0RVh0ZXhpZjpDb2xvclNwYWNlADEsIIwzw2IAAAAUdEVYdGV4aWY6RXhpZk9mZnNldAAyNiwg
Y9RXpAAAABl0RVh0ZXhpZjpQaXhlbFhEaW1lbnNpb24AOTYsIP1n6eAAAAAZdEVYdGV4aWY6UGl4
ZWxZRGltZW5zaW9uADk2LCBEnDIIAAAAAElFTkSuQmCC" />
</svg>
</p>
<h2>Module Concatenation</h2>
<p>Module Concatenation is an optimization feature designed to reduce both bundle size and runtime overhead.
Mako has an equivalent implementation found in Webpack's optimization documentation.</p>
</div>
</div>
</section>
<section class="highlights">
<h1>Benchmark</h1>
<p class="description">Mako is designed to be blazing fast.</p>
<div class="tabs">
<div class="tab-nav">
<button class="tab-btn active" data-tab="tab1">Cold Start</button>
<button class="tab-btn" data-tab="tab2">Root HMR</button>
<button class="tab-btn" data-tab="tab3">Leaf HMR</button>
<button class="tab-btn" data-tab="tab4">Cold Build</button>
</div>
<div class="benchmark-container">