Introducing @utoo/pack: A Next‑Gen Frontend Build Tool Powered by Turbopack

Introduction

Utoo is a Rust‑based frontend toolchain that currently provides a package manager and a build tool. utoopack is the build component of the Utoo chain, serving as the next generation of Ant Group’s previous Rust bundler Mako. It is built on top of the Rust bundler Turbopack and adds an independent CLI, Node API, a generic bundler configuration system, and a compatibility layer for webpack.

Performance Advantages

Cold‑start time is 3–10× faster than webpack, with larger projects seeing greater gains.

Hot‑module‑replacement (HMR) speed is several hundred times faster than webpack.

Thanks to a persistent cache, hot starts for large projects can be achieved in millisecond‑level latency.

Adoption in the Field

utoopack is already deployed in multiple Ant Group internal services and several open‑source frontend frameworks, often as the default bundler:

Umi uses utoopack by default; a single configuration line enables it.

Father integrates utoopack for UMD builds, reporting more than 10× speed improvement over webpack in internal scenarios.

Dumi includes stable utoopack support for documentation sites.

Ant Design Pro v6 adopts utoopack for production builds, cold start, and HMR, showing noticeable performance gains.

On npm, @utoo/pack maintains roughly 90 k weekly downloads. Internally, utoopack powers core frontend engineering scenarios such as middle‑back office frameworks, H5 frameworks, and component‑library build pipelines. For the H5 framework, local build speed is 5–10× faster than webpack.

Relation to Mako

utoopack is essentially the “Next” version of the previously open‑sourced Rust bundler Mako. It addresses several Mako shortcomings:

Mako’s architecture made SWC upgrades difficult; its SWC version lagged by more than 50 releases, causing unpatched syntax and transform errors.

HMR in Mako was unstable and could consume high memory on large projects.

Critical bugs in Mako caused CSS chunk order to be incorrect, leading to style‑override issues.

While utoopack’s cold‑start is slightly slower than Mako, its hot‑start benefits from file‑level persistent caching, making it considerably faster. Ongoing collaboration with Turbopack continues to improve performance.

Why Turbopack Was Chosen

During early technology selection, three high‑performance Rust bundlers—Turbopack, Rspack, and Rolldown—were evaluated. Turbopack was selected because:

It has a mature project and compatible architecture; Vite/Rolldown’s architecture would have incurred high migration costs for Ant’s bundle‑heavy ecosystem, and Rolldown had not yet released a 1.0 version.

It offers greater control and lower iteration risk, aligning with Ant’s need for deep customisation and rapid bug fixes in build tools.

Its model is advanced and flexible: Turbopack is developed by the original webpack author and the Next.js team, featuring the turbo‑tasks incremental engine that provides function‑level caching and automatic invalidation, enabling millisecond‑level HMR and incremental builds.

Turbopack’s overall build/dev testing was already at 100 % and was close to becoming the default in Next.js, providing a safe foundation for rapid internal adoption.

Architecture Overview

utoopack does not simply fork Turbopack; it depends on core Turbopack Rust crates and builds a generic frontend bundler on top of them. The main modules are: @utoo/pack: exposes the Node API and CLI. pack‑napi: handles communication between JavaScript and Rust. pack‑api: wraps the Rust‑side build API. pack‑core: the bundler core specific to utoopack.

At the lower level, utoopack reuses SWC for JavaScript/TypeScript/JSX transformation and minification, adding custom SWC transforms as needed, and Lightning CSS for CSS resolution, transformation, and minification.

The key architectural difference between Turbopack and webpack is that webpack follows a Compiler/Compilation model where a full compilation runs from entry through resolver, parser, graph, and emit stages. Turbopack, driven by turbo‑tasks, breaks the build into many fine‑grained, dependency‑tracked function‑level tasks (similar to SolidJS’s reactive model). When a file or configuration changes, only the affected tasks are invalidated and recomputed, enabling highly incremental updates.

Work Added on Top of Turbopack

To make Turbopack suitable for a broader range of frontend projects, utoopack adds extensive compatibility and generic bundler capabilities:

Compatibility work focuses on reducing migration cost for existing webpack projects, covering style handling, module/resource references, path resolution, runtime checks, and micro‑frontend loading.

Bundler capabilities added include output formats, externals, CSS Modules, resourceQuery, plugin adapters, and Node polyfills.

These features serve both Ant’s internal scenarios and the wider community when migrating complex projects to a new‑generation bundler.

Additional low‑level improvements include WebAssembly build support for Vibe Coding scenarios and running Turbopack’s webpack‑loaders on worker_threads to reduce communication overhead and boost performance.

Usage Guide

Using in Umi

// .umirc.ts
import { defineConfig } from 'umi';
export default defineConfig({
  utoopack: {}
});

Creating a new Umi app defaults to utoopack:

utx create-umi

Standalone Usage

Install the CLI and core packages: ut i @utoo/pack @utoo/pack-cli -S Example package.json:

{
  "name": "@utoo/pack-demo",
  "version": "1.0.0",
  "description": "utoopack example",
  "scripts": {
    "build": "up build",
    "dev": "up dev"
  },
  "dependencies": {
    "@utoo/pack": "^1.4.6",
    "@utoo/pack-cli": "^1.4.6"
  }
}

Webpack Compatibility Mode

Install the CLI dependencies and adjust scripts to use the compatibility flag:

{
  "scripts": {
    "build": "up build --webpack",
    "dev": "up dev --webpack"
  }
}

Conclusion

Ultra‑fast build experience : Turbopack’s incremental engine yields 3–10× cold‑start acceleration and millisecond‑level HMR.

Smooth migration path : webpack compatibility mode enables zero‑cost adoption for existing projects.

Open ecosystem collaboration : ongoing cooperation with the Vercel Turbopack team feeds improvements back upstream.

Both new projects and existing webpack‑based codebases can quickly experience utoopack’s performance benefits with minimal configuration.