文章预览
密集的导入语句不仅对视觉造成冲击,也是对代码组织结构的一次考验。 如何优雅地管理这些导入语句,避免“全屏占用”?本文将探讨生成大量导入语句的原因,可能带来的问题,以及如何从多个角度优化和管理导入语句。 拒绝使用模块重新导出 模块重新导出是一种常见技术,广泛应用于Twitter、字节跳动和谷歌等大公司的组件库中。 例如,在字节跳动的 arco-design 组件库中:https://github.com/arco-design/arco-design/blob/main/components/index.tsx 通过在 components/index.tsx 文件中重新导出所有组件,你可以只用一条导入语句来使用多个组件。 // 不要使用命名导入 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/
………………………………