Understanding Tree-Shaking with React, TypeScript, and RSBuild: A Guide to Optimizing Your Component Library

Building a modern, efficient component library with React and TypeScript is a common goal among developers aiming for scalable and maintainable code. One critical aspect of this process is ensuring that your library benefits from tree-shaking—a feature provided by bundlers like Rollup or newer versions of Webpack—that eliminates unused code from the final bundle, resulting in faster load times and smaller asset sizes.

However, configuring your setup to achieve effective tree-shaking, especially when using tools like RSBuild (RSlib), can be challenging. In this article, we’ll explore how to set up your React component library to promote proper tree-shaking, ensuring that only the components and CSS you use are included in your consuming app.

The Challenge: Ensuring Unused Components and CSS Are Not Bundled

Many developers experience issues where importing a component from their library, such as Badge, results in the entire library, including all components and their associated CSS, being bundled. This defeats the purpose of tree-shaking.

In your case, you’ve observed that importing a single component still pulls in all other components and CSS files. Your goal is to import, for example, the Badge component along with its CSS, without including other components like Button or unrelated styles.

Key Concepts for Effective Tree-Shaking

To achieve granular control over what gets included in your production bundle, consider the following best practices:

1. Use ES Module (ESM) Format: Modern bundlers support tree-shaking more effectively when libraries export in ESM format.
2. Provide Flat, Named Exports: Export components individually rather than as a namespace or default export object.
3. Ensure Proper Side-Effect Management: Use the sideEffects field in package.json and avoid global CSS imports within components or provide CSS in a way that supports per-component inclusion.
4. Leverage CSS Modules or Scoped Styles: This prevents CSS from being bundled globally and allows bundlers to include only necessary styles.

Practical Steps to Improve Tree-Shaking in Your Setup

1. Configure Your Build System for ESM and Side Effects

Your current rslib.config.ts indicates an ESM output, which is good. However, ensure your package.json explicitly declares side effects:

“`json
{
“