Rust Port of Webpack? Rspack, the New Kid on the Block

Created by the ByteDance Web Infra team, Rspack is a Rust-based bundler. It’s known for fast performance, interoperability with the Webpack ecosystem, strong customization abilities, and defaults — letting users hit the ground running without needing to configure much. It’s been made to solve tough challenges in business settings, improving the experience of many developers.

We’ve officially open-sourced Rspack to encourage innovation and teamwork. Developers, tech fans, and anyone interested in web development are welcome to join us. Whether you want to explore, create, or just be part of something big, Rspack is ready for you.

This article was translated, written by @hardfist

Rspack: An In-Depth Look

Why Develop Rspack?

ByteDance works with lots of big front-end applications, about 6,500, that take a long time to build, sometimes up to half an hour. They tried many ways to make the process faster, but nothing from the existing community tools worked well enough. After looking deeper into the problem, they found that no tools were quite right for what they needed, so they decided to create Rspack:

1. Good Dev Start Performance: Engineers often run the npm run dev command multiple times a day. With large-scale projects, each run might require a 10 minute wait, causing significant inconvenience. Therefore, optimizing the dev start time became a crucial necessity.
2. Good Build Performance: The npm run build command is frequently executed in the CI/CD environment, determining the efficiency of application production delivery. In some instances, build times could reach 20 to 30 minutes, emphasizing the need for a more time-efficient solution.
3. Enough Flexible Configuration: ByteDance’s varied user project configurations haven’t been fully unified, leading to issues when migrating the Webpack configuration to other build tools. The need for a solution with the flexibility of Webpack was apparent.
4. Production Environment Optimization Capability: Prior to Rspack, community solutions encountered negative impacts on the production environment optimization. Ensuring product optimization in the production environment was a non-negotiable feature.

After examining four main areas in need of improvement and looking into existing solutions, it became clear that nothing quite met the specific needs of large-scale front-end applications. The decision was made to create Rspack, though not without challenges.

Rspack isn’t just an answer to existing problems; it’s a custom-built tool, carefully designed to fit unique build requirements of large projects and modern needs. It represents a thoughtful effort to enhance performance, flexibility, and optimization, with the hope of making a meaningful difference in the web development landscape.

The Ambitious Path to Rspack:

A thorough investigation into existing community solutions showed that there were no tools that fulfilled all the specific needs identified. This led to the decision to develop Rspack in-house. By shaping the tool to meet these challenges, the team embarked on an innovative path, crafting a customized solution that holds the potential to become a force to be reckoned with.

Community Collaboration and Inspirations

Rspack’s development is a result of collective inspiration, guidance, and support from various projects and individuals in the community:

• Webpack Team and Community: For creating an excellent packaging tool and a rich ecosystem.
• @sokra: For significant work on the webpack project.
• @scriptedalchemy: For creating the module federation and helping connect Rspack with the community.
• SWC project (created by @kdy1): For support in Rspack’s dependency analysis, code transpilation, and compression.
• esbuild project (created by @evanw): Inspiring Rspack’s concurrency architecture.
• NAPI-RS project (created by @brooooooklyn): For support in Rspack’s node-binding implementation.
• Parcel project (created by @devongovett): An early explorer of Rust Bundler, inspiring Rspack’s incremental build architecture.
• Vite project (created by @尤雨溪): Its compatibility design with the Rollup community inspired the compatibility design of Rspack and Webpack communities.
• Rolldown project (created by the Rolldown team): Explores using Rust to build a high-performance Bundler + compatible Rollup API, inspired the design direction of Rspack.
• html-webpack-plugin project (created by @jantimon): Rspack forks this to avoid using webpack API not yet supported in Rspack.
• Turbopack project: Inspired the AST-based path rewriting logic in Rspack.

Rspack’s unique appeal extends to its interoperability with the existing Webpack ecosystem, including loaders, API, and config. While boasting a seamless integration, Rspack offers an added advantage: it comes with “wheels on.” This means that developers can get started without the verbosity or complexity typically associated with powerful tools. The design philosophy of Rspack is to provide power as and when you need it, making it accessible for beginners yet robust for experts.

What sets Rspack apart is its commitment to compatibility without compromising on functionality. The team behind Rspack is constantly expanding the API surface by adding more of Webpack’s plugin hooks, ensuring a broad alignment with the existing ecosystem. This thoughtful inclusion provides a dual benefit: it allows for easy transition for those familiar with Webpack and opens up avenues for exploiting more advanced features.

The development environment at ByteDance, characterized by a vast portfolio of software and a high-speed iterative process, demands an agile and powerful tool like Rspack. With the capability to compile large codebases rapidly, integration with Webpack’s ecosystem, and a design that enables both ease of entry and advanced utilization, Rspack proves itself as a valuable asset.

To try out Rspack, view the repository: GitHub — Rspack and check the official website: Rspack Official Website.

Continue reading on JavaScript in Plain English »