DEV Community

Cover image for 🚀 Ant Design Bundle Size Optimization: The Tree Shaking Approach Every React Developer Should Know
Anas Elbahrawy
Anas Elbahrawy

Posted on

🚀 Ant Design Bundle Size Optimization: The Tree Shaking Approach Every React Developer Should Know

#antd #react #productivity #javascript

Introduction

Bundle size matters. A lot.

In today's web development landscape, users expect lightning-fast applications, and search engines prioritize performance in their rankings. Yet, many React developers unknowingly ship bloated applications by importing entire UI libraries when they only need a handful of components.

If you're using Ant Design (antd) in your React projects, this article will show you a simple yet powerful technique that can reduce your bundle size by up to 80% and significantly improve your application's loading time.

The Problem: Bundle Bloat with Default Imports

Most developers start with Ant Design like this:

import { Button, Table, Form, Modal } from 'antd';
Enter fullscreen mode Exit fullscreen mode

While this looks clean and simple, there's a hidden cost. This import statement actually loads the entire Ant Design library into your bundle, even though you're only using 4 components out of 100+.

Real Numbers That Will Shock You

  • Full antd import: ~2.1MB (uncompressed)
  • 4 components via tree shaking: ~400KB (uncompressed)
  • Savings: ~80% reduction in bundle size

This difference translates to:

  • Faster initial page loads
  • Reduced bandwidth usage
  • Better user experience on mobile devices
  • Improved Core Web Vitals scores

The Solution: Strategic Tree Shaking with ES Module Imports

Tree shaking is a dead-code elimination technique that removes unused code from your final bundle. However, to make it work effectively with Ant Design, you need to be strategic about how you import components.

The Optimized Approach

Instead of importing from the main antd package, import each component directly from its ES module path:

// ❌ Bad: Imports entire library
import { Button, Table, Form } from 'antd';

// ✅ Good: Tree-shakable imports
import Button from 'antd/es/button';
import Table from 'antd/es/table';
import Form from 'antd/es/form';
Enter fullscreen mode Exit fullscreen mode

Creating a Centralized Import File

To maintain clean code organization, create a dedicated file for your optimized imports:

// utils/antdComponents.js

// Import only the components you need
import Row from 'antd/es/row';
import Col from 'antd/es/col';
import Button from 'antd/es/button';
import Input from 'antd/es/input';
import Form from 'antd/es/form';
import Select from 'antd/es/select';
import Table from 'antd/es/table';
import Card from 'antd/es/card';
import Modal from 'antd/es/modal';
import message from 'antd/es/message';
import notification from 'antd/es/notification';
// ... add only what you actually use

// Re-export for clean imports
export {
    Row, Col, Button, Input, Form, Select, Table, Card, Modal, 
    message, notification
};
Enter fullscreen mode Exit fullscreen mode

Now in your components:

// Your React components
import { Button, Table, Form, Modal } from '../utils/antdComponents';

function MyComponent() {
    return (
        <Form>
            <Button type="primary">Submit</Button>
            <Table dataSource={data} columns={columns} />
        </Form>
    );
}
Enter fullscreen mode Exit fullscreen mode

Advanced Optimization Strategies

1. Locale-Specific Imports

If you're using DatePicker or other locale-dependent components:

// Instead of importing all locales
import locale from 'antd/locale';

// Import only what you need
import ar_EG from 'antd/es/date-picker/locale/ar_EG';
import en_US from 'antd/es/date-picker/locale/en_US';
Enter fullscreen mode Exit fullscreen mode

2. Icon Optimization

Ant Design icons can be particularly heavy. Use selective imports:

// ❌ Heavy: Imports all icons
import { UserOutlined, DeleteOutlined } from '@ant-design/icons';

// ✅ Light: Direct imports
import UserOutlined from '@ant-design/icons/UserOutlined';
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
Enter fullscreen mode Exit fullscreen mode

3. CSS Optimization

Don't forget about CSS optimization:

// Import only the CSS for components you use
import 'antd/es/button/style/css';
import 'antd/es/table/style/css';
Enter fullscreen mode Exit fullscreen mode

Measuring the Impact

Bundle Analysis Tools

Use these tools to measure your optimization impact:

  1. webpack-bundle-analyzer 
npm install --save-dev webpack-bundle-analyzer
Enter fullscreen mode Exit fullscreen mode

  1. bundlephobia.com - Check package sizes before installing

  2. Lighthouse - Monitor Core Web Vitals improvements

Before vs. After Metrics

Here's what you can expect:

Metric Before Optimization After Optimization Improvement
Bundle Size 2.1MB 420KB 80% reduction
First Contentful Paint 2.8s 1.2s 57% faster
Time to Interactive 4.1s 1.8s 56% faster

Why Every Developer Needs This

1. User Experience

  • Faster loading times lead to higher user engagement
  • Reduced bounce rates, especially on mobile devices
  • Better performance on slower network connections

2. SEO Benefits

  • Google's Core Web Vitals directly impact search rankings
  • Faster sites get better visibility in search results
  • Improved mobile performance scores

3. Development Efficiency

  • Faster development builds
  • Quicker hot reload times
  • Reduced CI/CD pipeline duration

4. Cost Savings

  • Lower CDN bandwidth costs
  • Reduced server load
  • Better resource utilization

Best Practices and Implementation Tips

1. Audit Regularly

Set up automated bundle size monitoring in your CI/CD pipeline:

// package.json
{
  "scripts": {
    "analyze": "npm run build && bunx webpack-bundle-analyzer build/static/js/*.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Component Usage Tracking

Keep track of which components you actually use:

// Create a component registry
const USED_COMPONENTS = [
    'Button', 'Table', 'Form', 'Modal', 'Input', 
    'Select', 'DatePicker', 'Card'
];

// Import only what's in the registry
Enter fullscreen mode Exit fullscreen mode

3. Team Guidelines

Establish team conventions:

  • Always use the centralized import file
  • Regular bundle size reviews
  • Performance budgets in CI/CD

Common Pitfalls to Avoid

1. Mixed Import Styles

Don't mix default imports with tree-shakable imports:

// ❌ Don't do this
import { Button } from 'antd';
import Table from 'antd/es/table';
Enter fullscreen mode Exit fullscreen mode

2. Importing Unused Components

Regularly audit your import file and remove unused components.

3. Forgetting CSS Imports

Remember to import component-specific CSS when needed.

Tools and Resources

Essential Tools:

  • Bun/Bunx: For faster package management and builds
  • ESLint Plugin: eslint-plugin-import for import optimization
  • Vite: Built-in tree shaking capabilities
  • Rollup: Advanced tree shaking configuration

Useful Commands: 

# Analyze bundle with bun
bunx webpack-bundle-analyzer build/static/js/*.js

# Check package impact
npx bundlephobia <package-name>

# Performance audit
npx lighthouse <your-app-url> --only-categories=performance
Enter fullscreen mode Exit fullscreen mode

Conclusion

Optimizing your Ant Design imports isn't just a nice-to-have—it's essential for building performant React applications in 2025. With the techniques outlined in this article, you can:

  • Reduce bundle size by up to 80%
  • Improve loading times by 50%+
  • Enhance user experience across all devices
  • Boost your SEO rankings

The initial setup takes just a few minutes, but the performance benefits will compound over time as your application grows.

Start small: Pick your most frequently used components and create your optimized import file today. Your users (and your performance metrics) will thank you.

What's Next?

Try implementing these optimizations in your current project and share your results! I'd love to hear about the performance improvements you achieve.

Have questions or want to share your optimization wins? Drop a comment below or connect with me on Twitter/X.

Tags: #react #antd #performance #webdev #optimization #bundlesize #treeshaking #javascript

About the Author: Passionate about building performant web applications and sharing knowledge with the developer community. Follow for more React performance tips and modern web development insights.

Top comments (1)

Collapse
 
tang2087 profile image
Raymond Tang •

I found some of the steps are now not relevant.
antd v5 with vite does tree shaking automatically. This also applies to the icons.
I have a project using more than 20 components and the built one with tree shaking has the following size:
dist/assets/a-LE8JtNGW.js 1,253.15 kB │ gzip: 380.80 kB

I applied the same approach as you suggested, it has no effect. I checked the rollup visualiser and there is no extra components that are included.

But thanks for the post though as there are not much useful information regards to this.