import 导入还是隐藏！

如果打开一个文件，看到的全是满屏幕的 import 语句，这将是一种怎样的体验？

另一个说法隐藏的越多，维护起来越骂娘。这种只适合公共组件，不适合业务组件。

密密麻麻的import语句不仅仅是一种视觉上的冲击，更是对代码组织结构的一种考验。

我们是如何做到让import“占领满屏“的了，又该如何优雅地管理这些import语句呢？

本文将从产生大量import语句的原因、可能带来的问题以及如何优化和管理import语句几个角度来进行讨论。

《拒绝使用模块重导（Re-export）》

模块重导是一种通用的技术。在腾讯、字节、阿里等各大厂的组件库中都有大量使用。

如：字节的arco-design组件库中的组件：github.com/arco-design…

通过重导在comonents/index.tsx文件暴露所有组件，在使用时一个import就可以使用N个组件了。

// 不使用重导
import Modal from '@arco-design/web-react/es/Modal'
import Checkbox from '@arco-design/web-react/es/Checkbox'
import Message from '@arco-design/web-react/es/Message'
...

// 使用模块重导
import { Modal, Checkbox, Message} from '@arco-design/web-react'

导致import占满全屏的原因有很多。但不用模块重导、require.context、import动态导入、webpack.ProvidePlugin等手段，一定会让我们写出满屏的import