能否为单个组件导入完整库？Tree Shaking与按需引入组件的技术疑问

咱们拆分你的两个问题，逐个聊明白：

1. 能不能为单个组件导入完整的类库？ #

完全可以这么操作——比如你想在某个组件里用Ant Design的日历，直接写import * as Antd from 'antd'，再用<Antd.Calendar />就能正常运行。但非常不推荐这种做法：它会把整个Ant Design库的代码都打包进项目，哪怕你只用到一个日历组件，无端增大打包体积、拖慢页面加载速度，完全违背了Tree Shaking的优化初衷。

2. 使用Material UI时，能否安装完整Ant Design库后仅打包日历组件？ #

当然可以！只要正确配置按需加载，Tree Shaking就能帮你只打包用到的日历组件代码，不会带上Ant Design的冗余部分。具体有两种可行方式：

• 方法一：用Ant Design官方推荐的按需加载插件
  先安装babel-plugin-import，然后在你的Babel配置文件（比如.babelrc或babel.config.js）中添加如下配置：

  {
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true // 需要自动引入组件样式就设为true，用自定义样式可设为false
      }]
    ]
  }
  

  之后在组件里正常导入日历即可：

  import { Calendar } from 'antd';
  

  插件会自动把代码转换成import Calendar from 'antd/es/calendar'的形式，Tree Shaking就能识别并剔除未使用的Ant Design代码。

• 方法二：手动导入单个组件
  如果你不想用插件，也可以直接手动导入组件的ES模块版本：

  import Calendar from 'antd/es/calendar';
  import 'antd/es/calendar/style'; // 手动引入组件样式
  

  这种方式同样能让Tree Shaking生效，只打包日历组件的代码。

额外提醒：Tree Shaking生效的前提是项目使用**ES模块（import/export）**而非CommonJS的require语法，同时webpack的mode要设置为production（production模式下webpack会自动开启Tree Shaking优化）。

内容的提问来源于stack exchange，提问作者A. Atiyah