React按需加载Antd

最新推荐文章于 2025-06-03 09:13:06 发布

原创最新推荐文章于 2025-06-03 09:13:06 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#antd #webpack

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

React

5 篇文章

订阅专栏

本文介绍了如何在项目中使用Antd实现按需加载，包括安装Antd、配置Webpack及Babel来仅加载所需的组件，简化了项目体积并提高了加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日结博客 16.04.18 HangZhou

Antd作为阿里开发的一个React UI库（不仅仅是UI库）

如何按需加载呢？

其实很简单

1.安装antd

npm install antd --save

yarn add antd

2.引入antd的css库

在webpack.config.dev.js的module里的oneOf添加一下babel-loader

PS: 记住在webpack.config.prod.js的相同位置也要添加上

{
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
                plugins: [
                  ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
                ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },

3.在需要的地方按需使用就好了

import { Button } from 'antd'

render() {
    ...
    <Button />
}

ps:附上一个更简单的方式

利用babel-plugin-import的方式

1.首先安装一下依赖

npm i babel-plugin-import --save-dev

2.修改.babelrc文件，在options节点下

{
　　　　"plugins": ["transform-runtime", ["import", { "libraryName": "antd", "style": true }]]
　　}

大功告成！

喜欢就点个赞吧。谢谢你～