Mako — Extremely Fast Rust-Based JavaScript Bundler

Introduction

Mako is a high-performance JavaScript and TypeScript bundler created by the Ant Group frontend team (the creators of Umi.js and Ant Design). Built from the ground up in Rust, it aims to be a drop-in replacement for webpack in large-scale applications, offering 10x faster builds while supporting the webpack configuration patterns and plugin ecosystem that enterprises depend on.

What Mako Does

• Bundles JavaScript, TypeScript, CSS, and assets with Rust-speed compilation
• Supports Hot Module Replacement (HMR) with sub-second update times on large codebases
• Provides webpack-compatible configuration for loaders, aliases, and resolve settings
• Implements tree-shaking, code splitting, and scope hoisting for optimized production output
• Offers Module Federation support for micro-frontend architectures

Architecture Overview

Mako uses a multi-threaded Rust core that parallelizes parsing, transformation, and code generation across all available CPU cores. The module graph is built concurrently with file I/O and AST operations happening in parallel. It uses SWC for JavaScript/TypeScript parsing and transformation. CSS is handled by a built-in processor. The output stage supports chunking strategies compatible with webpack's split-chunks optimization.

Self-Hosting & Configuration

• Add Mako to an existing project via npm or use it as the built-in bundler in Umi 4+
• Configure via mako.config.js or the bundler section of .umirc.ts for Umi projects
• Define entry points, output paths, public paths, and environment-specific settings
• Add loader chains for handling file types like SVG, YAML, or GraphQL
• Use the analyze flag to generate bundle visualization reports for optimization

Key Features

• Builds large enterprise applications (10,000+ modules) in seconds instead of minutes
• Sub-100ms HMR updates regardless of project size due to incremental compilation
• Compatible with webpack loader API allowing reuse of existing babel-loader and css-loader chains
• Built-in support for React Fast Refresh, CSS Modules, PostCSS, and Less/Sass preprocessing
• Module Federation v1.5 support for sharing code between independently deployed applications

Comparison with Similar Tools

• webpack — The incumbent bundler; Mako is 10x faster with compatible configuration but smaller plugin ecosystem
• Vite — Dev-focused with ESM; Mako provides full bundling for both dev and prod with webpack compat
• Rspack — Another Rust webpack-compatible bundler; Mako focuses on the Umi/Ant Design ecosystem
• esbuild — Fast Go bundler; Mako offers richer webpack compatibility and Module Federation
• Turbopack — Vercel's Rust bundler for Next.js; Mako is framework-agnostic and production-ready

FAQ

Q: Can I use Mako outside of Umi? A: Yes. Mako works as a standalone bundler via its CLI or Node.js API. The Umi integration is optional — any JavaScript project with a standard entry point can use Mako.

Q: Does Mako support all webpack plugins? A: Mako supports webpack-compatible loaders and many configuration patterns, but not all webpack plugins are compatible. Core functionality like DefinePlugin, ProvidePlugin, and HtmlPlugin have built-in equivalents.

Q: How does Mako achieve faster builds than webpack? A: Rust eliminates JavaScript's single-threaded bottleneck. Mako parallelizes parsing, transformation, and code generation across all CPU cores, and uses SWC instead of Babel for TypeScript/JSX.

Q: Is Mako production-ready? A: Yes. Mako is used in production at Ant Group, powering thousands of internal applications including Alipay and Ant Design Pro dashboards.

Sources

• https://github.com/umijs/mako
• https://makojs.dev/