index.html

<!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,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAALfUExURQAAAPTu7vDw8PT06vHx7vLx7vLw7erq6vLw7fTw7P/j4/Dw7fLw7fLw7e/v7/Ly8vLw7fPw7v////Xv7/Lw7vHw7fLw7PHx7PLu7vHw7P////bt7fLv7fPw7fLw7fHx7vPw7vLw7fHx8fHx7vPv7fLw7fHv7PLx7fLw7PPz7P////Hx7PPw7PLw7fLw7fLv7fLw7fLw7fDw8PLw7fLw7fLw7vLw7fLw7fHv7e7u7vLv7PLw7vLw7ejo6PLw7fLw7f////Ly7vHv7fLv7fLw7vDw6/Lx7fPz8/Hx6vPx7PLx7vLv7fHx7vTu7vPw7fLw7fLw7fHw7vLw7fLv7PPx7PLw7fLw7fLw7fLw7fLw7PLv7f////Pv7P//3/Hw7fPz6PLw7fX16/Pw7fPv6/Pz7fLy7PLw7fDw6/Lw7fLw7fLw7fPv7/Lv7PLw7fPw7fPw7fLw7O7u7vLw7fLw7fPw7vLv7Obm5vDw8PLw7fDw8PLw7fPw7vHw7PLy6/Pw7vHx7fLw7fPv7/Hx7PLw7PLx7fLy8vLw7fPx7vHx7fLw7fLw7vLy7fLw7fLw7fLw7fPx7vLu7vLv7PDw6/Hv7fPw7fT06fPw7fLx7PLw7fXr6/Hx7vPv7PHw7fHw7PHx7vTv7/Lw7fLu7vLx7fLw7fPw7fHx7PLw7fLv7PLy6/Hw7fHv7fLw7fPv7vDw7fHx7fPu7vPv7vLw7vPw7v///+/v7/Hx7PLw7fHw7fLw7PLw7fLx7fPv6/Lv7PHw7fPw7fLv7fLw7vPx7f////Ly7e3t7e/v7/Lw7fPx7fHv7fLy7vPw7fPx7fLw7fHx7PPt7fPx7fLw7fLv7fLw7fLw7vPx7fTw7PLw7fLv7fLv7vTv7+vr6/Lw7PHw7PLw7PLw7vLv6/Lw7fbs7PHv7vLx7vLw7PLw7fLv7fLw7fHx6vLw7fLw7fLw7fbt7fHv7fHx7PLw7fPw7PHx7vLx7fLw7f///xHe81kAAADzdFJOUwAtERhcoecM2UMJRozRIBP7aQExdrz4NT2WBBxhputJZr0SS5HWXo7cKQI2e8H6crfxIavuhuD8cQ9Q25sL/p0GO4DFrzLDFSVrsMRbLlWa2ITzT3zK/e2teeYDpAjPFskZukEqKOQz0PmKPlH2VlN6HpnsZ6MKIrUj18zOJ8046D9t6qAU8FhI0oU53ve2ak2zNINUF/WyZRpZUuKXSi9kPOXIuWzyYCa7b3SSRUcsk3doBx9d76iI041AX6m41b5/BToOEOmPcEzhkMY3K37dYsu/fUTjtKIwDcCVh3VOnBuUsYn0c6okY57fHYJu2qVa1DpnPVcAAAABYktHRBJ7vGwAAAAAB3RJTUUH6AcCBxQu2d3rywAAB5ZJREFUeNrtWvlbE0cYHgUFQQQjjRLwRoOgoqIgKOFQ8CxYEUQOLxRFSgGjWKqA91XQttaTKlUs1CqKBbFUsRVr1XoflVZblYpt7V3nH+jO7gY2ZGd3djfB5+mT94dk7vdNduab+b4dAKywwgorrLDCCnOgHf3Z/uWQ29h26AjtUMq+U5uTOzh2doIIXaiMM3Tp2pbkqm6ur6ghi+5UQQ/q203TRuzuHj17QQ56U2V9UKJvP8uT2/X3HABbYSBVrqVTXoMsSu7tM3jIUGgKX6puGJMc3tti7CP6+I2E/BhFVfuz6YDRliAPDHIbA/EYC0CwrjkXEmpeck1Y+LgAKIjxAERwspETzMc+cdLk4VAUUwCYys37v2oW8n5R0f7i5AjTAHjNqGB6jGJ27xmxcWTsFGYCEG9copulWEH3BGJ+qEsEJrYhKVmpAvfZ5ArmaEzNw9x5cpnbz0+hv4MnEwtYsJCnMHWRPP4Ji2HaVGYe
                            LCEVkP46X2nGG3L45w3gzCGPNDIBmVn8cyNcJZk/m7V4SxPpbLqeSMCy5ZgKvxyJ/CuaV/6bwXRB
                            7lskAlZ2xNWscpfEn5fa0jXfhi4KnE86EfjRsUACf7vV3K7+zN6ucVOmQG1LzB+hN+46cg1TvjZA
                            FjOLdes3EPIXbDQRv4mp2UywIfFjy9a3vUl//5rppv11rkzdgkIZ5EXbtmdLeP6OGbyjuDHLccIU
                            iewJY2OCJbAD8I4aM9K7zEoO7UBOrssPf49rgbwLduSPFeF/fyh2uNidTJNZOiL2Xbv37OWO3G/f
                            cj0qDxLktxWa54V5TKPiXaLsH+w/YLQLl2RNMYysF9ocPxQ+e8w8yDRbdEioVVzp4BLuoHZB0anc
                            +sP4feEjsT9XzW5re1fiWpTFl8/hDvnx6CMm+9gnOP614g9Wd5RpmhPPV1t4rCKUM17ycU8vvmZF
                            JzACThyC4qhk7IlqVKvygMiTC7iDZX+6GztVnKowCqqnESiYzG6spzh/bc1pW643qkn/rFZwDC3u
                            IWyYS6CglHU3wtYxefvPz3C98Tln62pEnyQ2hhF8jkCB10Sm8YgvoMuXvhM53VXdz8cSWYlUrPte
                            n0TQXX+BafxVZiCn68Wo9V+TkNPwwy5F1SWC7kWZJhPYdYgLMTuCB1YBmEXQPe4yp0POlf3fSCJH
                            KFuBV+BBcu64ym7vuWvPFUlmR7iWiFdwJYNggBBqZ+ykJVm4GJzHCwBhI0W7x20GoKt8dgou1wUU
                            3EgV634TzXt5f74BXnYCCrJF3IBt9JZGsmYFECIgADgLGsVCJiCcokwALBZSEDwM37GoG2s0bikT
                            oN8rpEDAKN6mqulVNEPhXzBf0GlVaTHdoqnKavoBupOHb/hxGQjiJG+nO9R2Xj/XhT6jblMoQI07
                            nLQPpb/KeQy8vpqquAoh7atkKhQAt2AOJz53mY3O1CjGHaeKg6iEPaoP7SWD1AiYw4kP3MI49Bda
                            G8V7VGEX+siRjuq1MjiNoPsWIwDeZx7PjftG7RuoeRsaSye/o6sV8t+KrsAJgDWMV25kFGkL5Mmk
                            M+inVCqf/FCSRzVu/iMBBjfAuYWj6HsqX2zIbUe1e+SRz4yftFBoAfowz4eJ+ec0L7ZyKjeiOXyQ
                            jyofiDtqrTF92NEIsWiBD9tWS5sqDRv8Worm/Z2WkWiLvF4SedrDm2H1QBwGAbCOXqeqzigdi9KV
                            nNF+QHU9iMkDYn+scKCMaJUUAfDhRbrgkQ7qUZzDyPLUOKAqeyL2Ws/H1KRV+exwgnaSBMBaxiCc
                            VTtSnyuM40enUM1JUfJb0ZuQy5rz+AkKv6kJ+LkCDAYBrZiqVm7xEFRhI3ggT2DXWuOyBvYAlSpV
                            ANx4xlD8U+vhab/oKY6cWmtMjDHiPEf5bMkCYBobposyoWhCxTF85M8May35wH7jE+YR6QKg7mdU
                            mGsaJlyN/FJN6wgxtdYOMmtt5+3xJnaipwwBEF5SgapVPD+Ujjk1cQrYtYbQLquUz1U9JksA/KWK
                            N1bcgFrnGXK1njGsvxpaUYl71XZTngA4gHe0gEbUPBI2rzWEDQP9yiAWRNcLfCApZtCzM+l28742
                            yDVS2LmMMq+AQu7BVpOiHSPaI8W8AmDziebivp6iwRmEEyQCQsm9rtN0h19H3yWNUNiQCACqraQC
                            1M6JB5cQvVFiQXrB5DnpLyrVS2CntlBCfgCOl0kamBRjiAWAEtEogRxcIxcAGp0sIGC3BAHgwWHzC/hNigCgeWJ2AU2SBCgPAZjgkUQBYCrhm3NSlEsVANaIB+2k4IpkAWDQ7+YUIOUltgE7Y83Hv+4PGQJAzlOzkOvy/7xO/ArZGN6VitnL4p+T7YMY+CoKiNlrO5G4pILIJImh80F9+K9cpeQ0CuQEpO4vlfj2XAi5f0sjDxiXVaKclQtnCbcH9P/8a4Gbrcl1ZOyLR4UlKmfjg0r8Vtezp30aLUPOoKug1+Hl6UgSgFGE/s8w5EP7+uZZmpxGBN8Vx4SQ4gdtwo6Q/cKYPK703iLp1+WUILBvC3tN3UAz3t4lRT17medFU3pbXaRvjXCY0bC9Wvk48lHi8DLZrbDCCiussOL/h/8ABa8sbvszFO8AAABEZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAICgAwAEAAAAAQAAAIAAAAAASI4EdwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyNC0wNy0wMlQwNzoyMDo0NiswMDowMF8m34MAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjQtMDctMDJUMDc6MjA6NDYrMDA6MDAue2c/AAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDI0LTA3LTAyVDA3OjIwOjQ2KzAwOjAweW5G4AAAABN0RVh0ZXhpZjpDb2xvclNwYWNlADEsIIwzw2IAAAAUdEVYdGV4aWY6RXhpZk9mZnNldAAyNiwgY9RXpAAAABp0RVh0ZXhpZjpQaXhlbFhEaW1lbnNpb24AMTI4LCBBE9LiAAAAGnRFWHRleGlmOlBpeGVsWURpbWVuc2lvbgAxMjgsIO97Q3MAAAAASUVORK5CYII=" />
              </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
              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
              Zk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAGKgAwAE
              AAAAAQAAAGIAAAAAB8+c6QAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyNC0wNy0wMlQwNzoyMDo0Nisw
              MDowMF8m34MAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjQtMDctMDJUMDc6MjA6NDYrMDA6MDAue2c/
              AAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDI0LTA3LTAyVDA3OjIwOjQ2KzAwOjAweW5G4AAAABN0
              RVh0ZXhpZjpDb2xvclNwYWNlADEsIIwzw2IAAAAUdEVYdGV4aWY6RXhpZk9mZnNldAAyNiwgY9RX
              pAAAABl0RVh0ZXhpZjpQaXhlbFhEaW1lbnNpb24AOTgsIPf5xOoAAAAZdEVYdGV4aWY6UGl4ZWxZ
              RGltZW5zaW9uADk4LCBOAh8CAAAAAElFTkSuQmCC" />
              </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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
              +p3/6ZIU4OpDQk1NTU/SLw5AcedD8zIZVwXq379/o8D/pj9nPSgi9s81cxHXH7MV0tr/tGea/jzP
              ENcF8pn+DahOAT7D2cWTLcCnKjLZV1C0ye1y2+X/AfCaXnlTjGaZAAAARGVYSWZNTQAqAAAACAAB
              h2kABAAAAAEAAAAaAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAABooAMABAAAAAEAAABeAAAA
              AFEyFjcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjQtMDctMDJUMDc6MjA6NDYrMDA6MDBfJt+DAAAA
              JXRFWHRkYXRlOm1vZGlmeQAyMDI0LTA3LTAyVDA3OjIwOjQ2KzAwOjAwLntnPwAAACh0RVh0ZGF0
              ZTp0aW1lc3RhbXAAMjAyNC0wNy0wMlQwNzoyMDo0NiswMDowMHluRuAAAAATdEVYdGV4aWY6Q29s
              b3JTcGFjZQAxLCCMM8NiAAAAFHRFWHRleGlmOkV4aWZPZmZzZXQAMjYsIGPUV6QAAAAadEVYdGV4
              aWY6UGl4ZWxYRGltZW5zaW9uADEwNCwg4gDjDQAAABl0RVh0ZXhpZjpQaXhlbFlEaW1lbnNpb24A
              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">
            <div id="tab1" class="tab-pane active">
              <div class="benchmark-item">
                <p class="benchmark-title">Mako</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.559"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Rsbuild</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.955"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Farm</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="1.005"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Vite</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="1.150"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Webpack</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="4.897"></div>
              </div>
            </div>
            <div id="tab2" class="tab-pane">
              <div class="benchmark-item">
                <p class="benchmark-title">Mako</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.065"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Rsbuild</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.154"></div>
              </div>
              <!-- <div class="benchmark-item">
                <p class="benchmark-title">Farm</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time"></div>
              </div> -->
              <div class="benchmark-item">
                <p class="benchmark-title">Vite</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.486"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Webpack</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.301"></div>
              </div>
            </div>
            <div id="tab3" class="tab-pane">
              <div class="benchmark-item">
                <p class="benchmark-title">Mako</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.057"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Rsbuild</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.144"></div>
              </div>
              <!-- <div class="benchmark-item">
                <p class="benchmark-title">Farm</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time"></div>
              </div> -->
              <div class="benchmark-item">
                <p class="benchmark-title">Vite</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.464"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Webpack</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.243"></div>
              </div>
            </div>
            <div id="tab4" class="tab-pane">
              <div class="benchmark-item">
                <p class="benchmark-title">Mako</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.629"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Rsbuild</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.679"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Farm</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="0.937"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Vite</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="1.345"></div>
              </div>
              <div class="benchmark-item">
                <p class="benchmark-title">Webpack</p>
                <div class="benchmark-w">
                  <div class="benchmark-bar">
                    <div class="benchmark-bar-current no-mako"></div>
                  </div>
                </div>
                <div class="benchmark-time" data-time="5.430"></div>
              </div>
            </div>
          </div>
        </div>
        <p class="benchmark">
          <a href="https://github.com/umijs/benchmark">View benchmark</a>
        </p>
      </section>
      <section class="highlights">
        <h1>Who is using</h1>
        <div class="user-container">
          <div class="user">
            <img src="https://gw.alipayobjects.com/mdn/rms_27e257/afts/img/A*70AsSL23VKYAAAAAAAAAAAAAARQnAQ" width="150"
              alt="蚂蚁集团logo">
          </div>
          <div class="user">
            <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" width="48" alt="Antd logo">
            <p class="user-name">Ant Design</p>
          </div>
          <div class="user">
            <img
              src="https://gw.alipayobjects.com/zos/bmw-prod/598d14af-4f1c-497d-b579-5ac42cd4dd1f/k7bjua9c_w132_h130.png"
              width="48" alt="UmiJS">
            <p class="user-name">UmiJS</p>
          </div>
      </section>
    </main>
    <footer class="footer">
      <div class="top">
        <div class="left">
          <img src="https://img.alicdn.com/imgextra/i4/O1CN01dvFN0j1e2rYBJpJGJ_!!6000000003814-2-tps-2048-2048.png"
            width="32" height="32" alt="Mako Logo">
          <sup>Mako</sup>
        </div>
        <div class="right">
          <div class="sitemap-col">
            <h4 class="">Resources</h4>
            <ul>
              <li>
                <a href="/docs">Docs</a>
              </li>
              <li>
                <a href="https://github.com/umijs/mako">Github</a>
              </li>
              <li>
                <a href="/docs/feedback">Contact</a>
              </li>
              <li>
                <a href="/blog">Blog</a>
                <a href="/rss.xml">
                  <svg class="rss" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                    aria-hidden="true" data-slot="icon">
                    <path fill-rule="evenodd"
                      d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"
                      clip-rule="evenodd"></path>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
          <div class="sitemap-col">
            <h4 class="">Ecosystem</h4>
            <ul>
              <li>
                <a href="https://umijs.org">Umi</a>
              </li>
              <li>
                <a href="https://d.umijs.org">dumi</a>
              </li>
            </ul>
          </div>
          <div class="sitemap-col">
            <h4 class="">Project</h4>
            <ul>
              <li>
                <a href="https://github.com/umijs/mako/blob/master/CHANGELOG.md">Changelog</a>
              </li>
              <li>
                <a href="/docs/faq">FAQ</a>
              </li>
              <li>
                <a href="/docs/contributing">Contributing</a>
              </li>
              <li>
                <a href="https://github.com/umijs/mako/blob/master/LICENSE">License</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <sup class="copyright">Made with ❤️ by Ant Group and Mako Community</sup>
    </footer>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tabButtons = document.querySelectorAll('.tab-btn');
      const tabPanes = document.querySelectorAll('.tab-pane');
      const copyContent = document.querySelector('.content');
      const copyButton = document.querySelector('.copy');

      function switchTab(tabId) {
        tabButtons.forEach(btn => btn.classList.remove('active'));
        tabPanes.forEach(pane => pane.classList.remove('active'));

        const selectedButton = document.querySelector(`[data-tab="${tabId}"]`);
        const selectedPane = document.getElementById(tabId);

        if (selectedButton && selectedPane) {
          selectedButton.classList.add('active');
          selectedPane.classList.add('active');
          runBenchmarksAnimation();
        }
      }

      function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
          const copyStatus = copyButton.querySelector('span');
          if (!copyStatus) {
            copyButton.innerHTML = "<span>✔</span>";
          }
        }).catch(err => console.error('Could not copy text: ', err));
      }

      function getMaxTime() {
        const activeTab = document.querySelector('.tab-pane.active');
        const timeElements = activeTab.querySelectorAll('.benchmark-time');
        let maxTime = 0;

        timeElements.forEach(element => {
          const time = parseFloat(element.getAttribute('data-time'));
          if (time > maxTime) {
            maxTime = time;
          }
        });

        return maxTime;
      }

      function runBenchmarksAnimation() {
        const activeTab = document.querySelector('.tab-pane.active');
        const benchmarks = activeTab.querySelectorAll('.benchmark-item');
        const maxTime = getMaxTime();

        benchmarks.forEach(benchmark => {
          const bar = benchmark.querySelector('.benchmark-bar');
          const barCurrent = benchmark.querySelector('.benchmark-bar-current');
          const timeElement = benchmark.querySelector('.benchmark-time');
          const time = parseFloat(timeElement.getAttribute('data-time'));

          if (!time) return;

          bar.style.width = `${time / maxTime * 100}%`;
          barCurrent.style.width = '0%';
          barCurrent.style.transition = 'none';
          requestAnimationFrame(() => {
            barCurrent.style.transition = `width ${time}s ease-in-out`;
            barCurrent.style.width = `100%`;
          });

          let currentTime = 0;
          timeElement.textContent = '0s';
          const totalSteps = time * 100;
          const intervalTime = (time * 1000) / totalSteps;

          const interval = setInterval(() => {
            currentTime += time / totalSteps;
            if (currentTime >= time) {
              currentTime = time;
              clearInterval(interval);
            }
            timeElement.textContent = currentTime.toFixed(2) + 's';
          }, intervalTime);
        });
      }

      tabButtons.forEach(button => {
        button.addEventListener('click', () => switchTab(button.getAttribute('data-tab')));
      });

      copyButton.addEventListener('click', () => copyToClipboard(copyContent.textContent));

      runBenchmarksAnimation();
    });
  </script>
  <script>
    PetercatLUI.initAssistant({
      apiDomain: 'https://api.petercat.ai',
      token: '0b4986d1-3e9e-4081-b24d-96e1b9e1d648',
      starters: ['Tell me about the project Shark Chill', 'Review the contribution guidelines', 'How can I quickly get started?'],
      clearMessage: true
    });
  </script>
</body>

</html>