按需导入模块组件异常：CommonJS转ES6后Webpack包体积激增

Hey，我刚踩过一模一样的坑！让我给你理清楚前因后果：

问题本质 #

• CommonJS按需导入的优势：当你用require('xxx/lib/Button')这种方式导入单一组件时，Webpack只会打包你明确指定的那个组件文件，所以最终包体积是1.17 MB——完全只包含你用到的代码。
• ES6导入的默认陷阱：迁移到TypeScript后，如果你的导入写法是import { Button, Input } from 'xxx'，而这个库的ES模块入口（一般是package.json里的module字段指向的文件）是把所有组件都导出在一起的「全量入口」，那么Webpack的**树摇（Tree Shaking）**可能没生效（或者库本身没做ES模块的按需导出优化），导致把整个库的所有组件都打包进去了，自然体积就涨到了2.21 MB。

快速修复方案 #

• 手动按需导入单个组件：和CommonJS的思路一样，直接导入组件的独立ES模块文件，比如：

  import Button from 'xxx/es/Button'
  import Input from 'xxx/es/Input'
  

  这样Webpack只会打包你用到的组件代码，包体积会回到接近1.17 MB的水平。
• 用插件自动处理按需导入：如果你不想手动写长路径，可以用babel-plugin-import（配合Babel使用），它会自动把import { Button } from 'xxx'转换成按需导入的形式，同时保持代码的简洁性。
• 检查TypeScript配置：确保tsconfig.json里的这些配置正确：

  {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ES6",
    "strict": true
  }
  

  这些配置能保证TypeScript输出标准的ES模块语法，让Webpack可以正常进行树摇优化。
• 确认库的ES模块支持：有些库的package.json可能没正确配置module字段，导致Webpack优先使用CommonJS的全量入口。这时候可以手动指定ES模块的导入路径，或者给库提交issue请求修复。

补充下测试数据：用CommonJS按需导入时Webpack打包体积是1.17 MB，迁TypeScript用ES6默认导入后变成2.21 MB，核心原因就是后者导入了所有未使用的组件。

内容的提问来源于stack exchange，提问作者Sávio Raires