今天看啥  ›  专栏  ›  前端宇宙

向满屏的 Import 语句说再见!

前端宇宙  · 公众号  ·  · 2024-10-09 09:14

文章预览

密集的导入语句不仅对视觉造成冲击,也是对代码组织结构的一次考验。 如何优雅地管理这些导入语句,避免“全屏占用”?本文将探讨生成大量导入语句的原因,可能带来的问题,以及如何从多个角度优化和管理导入语句。 拒绝使用模块重新导出 模块重新导出是一种常见技术,广泛应用于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/ ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览