babel-plugin-import介绍

发表于 更新于 本文字数： 830 阅读时长 ≈ 1 分钟

因为打包体积问题，重新了解babel-plugin-import，以前对该插件认识不清晰，这里梳理下。

插件介绍

babel-plugin-import是一个支持模块化导入的Babel插件。插件的功能是根据配置将全量导入转换为按需导入。

解决的问题

  1. 导入路径还是全量，这样路径短。
  2. 按需导入，这样体积小。

举例

正如官方提到的，经典的例子就是antd/lodash，当然这里其实更应该指的是老版本的antd，lodash。

antd

1
2
3
import { Button } from 'antd';

import Button from 'antd/lib/button';

注意，虽然这里以antd，lodash来说明，但实际这两个包都不需要使用babel-plugin-import了。

  1. antd支持treeshaking。
  2. lodash释放了ES版的包lodash-es,切换到该包名下即可，也支持tree shaking。

与tree shaking矛盾吗

并不是所有项目都用到了babel-plugin-import，为啥，因为有tree shaking。

两者矛盾吗？并不矛盾，但最终目的一致，即都是为了按需加载/打包。当组件库之类的支持了tree shaking，那么构建工具本身打包时就会删除unused的模块。 因此只要组件库支持tree shaking，那么就可以使用按需加载，而无需使用babel-plugin-import。

翻看插件的提交时间和webpack支持treeshaking支持的时间，也就理解了为啥以前需要用babel-plugin-import。因为当时还没支持tree shaking。

如下为babel-plugin-import的提交时间

https://static.1991421.cn/2024/2024-09-18-161956.jpeg

而webpack支持treeshaking是在webpack v4，大概是2019年的事了。

写在最后

OK，关于babel-plugin-import就分析到这里。