How do I use .babelrc to get babel- plugin -import working for antd?

First, babel-plugin-import is a Babel plugin designed for on-demand loading of libraries, commonly utilized in projects leveraging UI component libraries such as Ant Design (abbreviated as antd). With this plugin, you can import only the necessary components instead of the entire library, significantly reducing the size of the final bundle.

To enable babel-plugin-import to work with antd, configure it in your project's Babel configuration file (typically .babelrc or babel.config.js). Here are the specific steps and examples:

Step 1: Install the required packages

Ensure you have installed antd and babel-plugin-import. If not, use npm or yarn:

bash
npm install antd babel-plugin-import --save

Or use yarn:

bash
yarn add antd babel-plugin-import

Step 2: Configure .babelrc

Add the babel-plugin-import configuration to your project's root .babelrc file. If you use babel.config.js, add it to that file instead.

Here is an example .babelrc configuration:

json
{
  "presets": ["@babel/preset-react"],
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // Setting `style: true` loads Less files
    }]
  ]
}

This configuration performs the following:

• "libraryName": "antd" instructs Babel to process the antd library.
• "libraryDirectory": "es" specifies that antd uses ES modules.
• "style": "css" indicates importing the corresponding CSS file. For theme customization using Less, set this value to true.

Step 3: Use antd components

After configuration, directly import antd components in your project, and the plugin will handle on-demand loading.

jsx
import { Button } from 'antd';

function App() {
  return <Button type="primary">Click me</Button>;
}

This code imports only the Button component and its associated CSS, not the entire antd library.

Conclusion

By following these steps, you can effectively configure babel-plugin-import to load only the antd components and styles you use, optimizing your application's performance. This on-demand loading approach is a widely adopted optimization technique in real-world development.