import是如何“占领满屏“

import是如何“占领满屏“的?

《拒绝使用模块重导(Re-export)》

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

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

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

javascript
// 不使用重导
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'

Re-export一般用于收拢同类型的模块、一般都是以文件夹为单位,如components、routes、utils、hooks、stories等都通过各自的index.tsx暴露,这样就能极大程度的简化导入路径、提升代码可读性、可维护性

Re-export的几种形式

1. 直接重导出

直接从另一个模块重导出特定的成员。

javascript
export { foo, bar } from './moduleA';
2. 重命名并重导出(含默认导出)

从另一个模块导入成员,可能会重命名它们,然后再导出。

默认导出也可以重命名并重导出

javascript
// 通过export导出的
export { foo as newFoo, bar as newBar } from './moduleA';
// 通过export default导出的
export { default as ModuleDDefault } from './moduleD';

3. 重导出整个模块(不含默认导出)

将另一个模块的所有导出成员作为单个对象重导出。(注意:整个导出不会包含export default)

javascript
export * from './moduleA';

4. 收拢、结合导入与重导出

首先导入模块中的成员,然后使用它们,最后将其重导出。

javascript
import { foo, bar } from './moduleA';
export { foo, bar };

通过这些形式,我们可以灵活地组织和管理代码模块。每种形式都有其适用场景,选择合适的方式可以帮助我们构建出更清晰、更高效的代码结构。

《从不使用require.context》

require.context 是一个非常有用的功能,它允许我们动态地导入一组模块,而不需要显式地一个接一个地导入。

只需一段代码让你只管增加文件、组件,将自动收拢重导。

在项目路由、状态管理等固定场景下极其好使(能提效、尽可能避免了增加一个配置要动N个文件的情况)

尤其是在配置路由时、产生大批量的import(多少个页面就得导入多少个import😅)

 
javascript代码解读
复制代码
// 不使用require.context
import A form '@/pages/A'
import B form '@/pages/B'
...// routes/index.ts文件统一处理
// 创建一个context来导入routes目录下所有的 .ts 文件
const routesContext = require.context('./routes', false, /.ts$/);
const routes = [];
// 遍历 context 中的每个模块
routesContext.keys().forEach(modulePath => {// 获取模块的导出const route = routesContext(modulePath);// 获取组件名称【如果需要话】,例如:从 "./Header.ts" 提取 "Header"// const routeName = modulePath.replace(/^./(.*).\w+$/, '$1');// 将组件存储在组件对象中routes.push(route.default || route)
});export default routes;

在大项目、多路由的情况下,使用 require.context 在处理路由导入上大有可为

《从不使用import动态导入》

动态import也能实现类似require.context的功能、动态收拢模块。关于import动态导入的更多内容可以看下这篇文章内的介绍《如何在Vite5➕React➕Ts项目中优雅的使用Mock数据?》

《对ProvidePlugin不感兴趣》

webpack.ProvidePlugin是个好东西,但也不能滥用

项目中用到的变量/函数/库或工具,只要配置后就可以在任何地方使用了。

相信我--看完这个示例,如果你没用过、那你肯定会迫不及待的想要尝试了🤗

 
php代码解读
复制代码
const webpack = require('webpack');module.exports = {// 其他配置...plugins: [new webpack.ProvidePlugin({React: 'react',_: 'lodash',dayjs: 'dayjs',// 假设项目中自己定义的utils.js在src目录下Utils: path.resolve(__dirname, 'src/utils.js')
})})]// 其他配置...
};

现在你可以在任何地方使用 dayjs、lodash、Utils等,而不需要导入它

小结:

  • webpack.ProvidePlugin是一个强大的工具,它可以帮助我们减少重复的导入语句,使代码更加干净整洁。但是,它不会减少构建大小,因为这些库仍然会被包含在你的最终打包文件中。正确使用这个插件可以提高开发效率,但需要谨慎使用,以避免隐藏依赖关系,导致代码难以理解和维护。
  • 对于需要按需加载的模块或组件,考虑使用动态 import() 语法,这样可以更有效地控制代码的加载时机和减小打包体积。
  • 谨慎使用 ProvidePlugin,只为那些确实需要在多个地方使用的模块配置全局变量,以避免不必要的代码打包。

另外,如果是Vite项目可以使用vite-plugin-inject代替ProvidePlugin的功能

 
ts代码解读
复制代码
// 配置
import inject from 'vite-plugin-inject'; // 实测暂不可用,有替代方案再更新
...
plugins: [
inject({// 键是你想要提供的全局变量,值是你要提供的模块dayjs: 'dayjs', // 例如,这将在全局范围内提供 'dayjs',可以通过 dayjs 访问// 你可以继续添加其他需要全局提供的模块
}),
]
...

如果使用了TS,记得配置下类型:

 
ts代码解读
复制代码
// globals.d.ts文件 处理全局类型
import dayjs from 'dayjs';
declare global {const dayjs: typeof dayjs;
}// tsconfig.json文件 也配置一下
{ 
"compilerOptions": { 
// 编译选项... 
}, 
"include": [ "src/**/*", "globals.d.ts" // 确保 TypeScript 包括这个文件 ] 
}

《大量使用Typescript导入类型》

在TS项目中,满屏import肯定少不了TS的份。但如果合理配置,必定能急剧减少import的导入

这里介绍下自己在项目中使用最多的方法:TS命名空间。有了它既能让类型模块化,更过分的是在使用时可以直接不导入类型😅。

同样,它和ProvidePlugin一样炸裂,可以直接灭掉import导入。


使用示例:

 
typescript代码解读
复制代码
// accout.ts
declare namespace IAccount {type IList<T = IItem> = {count: numberlist: T[]}interface IUser {id: number;name: string;avatar: string;}
}// 任意文件直接使用,无需导入
const [list, setList] = useState<IAccount.IList|undefined>();
const [user, setUser] = useState<IAccount.IUser|undefined>();

注意⚠️eslint可能需要配置下开启🔛使用命名空间

《不去充分利用bable特性》

React似乎也意识到不妥:在17版本之前,由于jsx的特性每个组件都需要明文引入import React from 'react',但在这之后由编译器自行转换,无需引入 React。如果你使用的React17之前的版本也可以通过修改babel达到这个目的,更多细节可参考React官网,有非常详细的说明。(也提供了自动去除引入的脚本)

其它

1. 设置webpack、ts别名。

既能缩短导入路径、也能更有语义化

javascript代码解读
复制代码
resolve: {alias: {"@src": path.resolve(__dirname, 'src/'),"@components": path.resolve(__dirname, 'src/components/'),"@utils": path.resolve(__dirname, 'src/utils/')}
}// 使用别名前
import MyComponent from '../../../../components/MyComponent';// 使用别名后
import MyComponent from '@components/MyComponent';

2. 设置格式化prettier.printWidth

值设置的太小可能会导致频繁换行、给够难以阅读。其值在120较为合适吧(看团队实际的使用情况)。

json代码解读
复制代码
{"printWidth": 120,...
}

3. 按条件动态全局加载组件

在入口文件引入全局组件,使用require.ensure或import根据条件动态加载组件,既能便于维护、减少引用、也能减少性能开销

javascript
// 异步加载全局弹窗,减少性能开销
Vue.component('IMessage', function (resolve) {// 指定条件全局加载,无需在具体页面中引用if (/^/pagea|pageb/.test(location.pathname)) {require.ensure(['./components/message/index.vue'], function() {resolve(require('./components/message/index.vue'));});}
});

4. babel-plugin-import的使用

babel-plugin-import不是直接减少 import 的数量,而是通过优化 import 语句来减少打包体积,提高项目的加载性能。这对于使用了大型第三方库的项目来说是一个非常有价值的优化手段。

arco-design为例:

json
// .bablerc配置
{"plugins": [["import", {"libraryName": "@arco-design/web-react","libraryDirectory": "es", // 或者 "lib",依赖于具体使用的模块系统"style": true // 加载 CSS}, "@arco-design/web-react"]]
}
// 这个配置告诉 babel-plugin-import 自动将类似 import { Button } from '@arco-design/web-react'; 的导入语句转换为按需导入的形式,并且加载对应的 CSS 文件。

ts
// 业务中使用
import { Button } from '@arco-design/web-react';
// 将被bable编译成
import Button from '@arco-design/web-react/es/button';
import '@arco-design/web-react/es/button/style/css.js'; // 如果 style 配置为 true

总结

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

只有想不到的,没有做不到的。只要你想、相信就一定能如愿以偿。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/63239.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(软件测试文档大全)测试计划,测试报告,测试方案,压力测试报告,性能测试,等保测评,安全扫描测试,日常运维检查测试,功能测试等全下载

1. 引言 1.1. 编写目的 1.2. 项目背景 1.3. 读者对象 1.4. 参考资料 1.5. 术语与缩略语 2. 测试策略 2.1. 测试完成标准 2.2. 测试类型 2.2.1. 功能测试 2.2.2. 性能测试 2.2.3. 安全性与访问控制测试 2.3. 测试工具 3. 测试技术 4. 测试资源 4.1. 人员安排 4.2. 测试环境 4.2.…

抽象工厂模式的理解和实践

在软件开发中&#xff0c;设计模式是解决常见问题的最佳实践。抽象工厂模式是一种创建型设计模式&#xff0c;提供了一种创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们的具体类。本文将详细解释抽象工厂模式的概念、结构、优点、缺点&#xff0c;并通过Java代…

算法日记(2024.12.05)

1.对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false 提示&#xff1…

【知识点】图与图论入门

何为图论 见名知意&#xff0c;图论 (Graph Theory) 就是研究 图 (Graph) 的数学理论和方法。图是一种抽象的数据结构&#xff0c;由 节点 (Node) 和 连接这些节点的 边 (Edge) 组成。图论在计算机科学、网络分析、物流、社会网络分析等领域有广泛的应用。 如下&#xff0c;这…

【书生大模型实战营】Linux 基础知识-L0G1000

前言&#xff1a;书生大模型实战营是上海人工智能实验室开展的大模型系列实践活动&#xff0c;提供免费算力平台&#xff0c;学员通过闯关式任务&#xff0c;可获得免费算力和存储&#xff0c;助力项目实践。本期是第4期&#xff0c;时间从十一月份开始&#xff0c;持续到十二月…

【软件安全】软件安全设计规范,软件系统安全设计制度(Word原件)

1.1安全建设原则 1.2 安全管理体系 1.3 安全管理规范 1.4 数据安全保障措施 1.4.1 数据库安全保障 1.4.2 操作系统安全保障 1.4.3 病毒防治 1.5安全保障措施 1.5.1实名认证保障 1.5.2 接口安全保障 1.5.3 加密传输保障 1.5.4终端安全保障 软件全面文档清单涵盖以下核心内容&a…

你是如何找bug的?bug分析的正确打开方式

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Bug严重级别(Severity&#xff0c;Bug级别)&#xff1a;是指因缺陷引起的故障对软件产品的影响程度&#xff0c;由测试人员指定。 A-Crash&#xff1a;造成系统或…

WGCNA分析流程及内容解读

文章标题&#xff1a;通过 WGCNA 和机器学习识别和验证与免疫和氧化应激相关的糖尿病肾病诊 发表年限&#xff1a;2023年 期刊&#xff1a;Frontiers in Immunology 影响因子&#xff1a;5.7 研究背景&#xff1a; 糖尿病肾病&#xff08;DN&#xff09;以蛋白尿、高血压和…

【MySQL 进阶之路】锁详解

MySQL 锁详解 1. 锁的基本概念 锁在数据库中是用来保证数据一致性和防止并发冲突的一种机制。MySQL 中的锁可以分为不同的类型和粒度&#xff0c;每种锁都有特定的使用场景和特点。了解锁的类型、作用以及如何避免锁带来的问题是提升数据库性能和避免数据冲突的关键。 2. 锁…

qsort函数用法,以及模拟实现

函数定义 基于快速排列的一个函数&#xff0c;它的四个参数的含义&#xff1a; 1、void* base&#xff0c;是排序开始的地址 2、size_t num 想要排列的个数 3、size_t size 排列对象&#xff0c;一个占多少空间&#xff08;字节&#xff09; 4、int (*comper)(void*,voi…

CentOS7虚拟机 网络适配器 NAT模式和桥接模式区别

一、环境介绍 宿主机&#xff1a;Windows电脑 虚拟机&#xff1a;VMware下的CentOS7 局域网&#xff1a;路由器下的各真实主机组成的网络 内部局域网&#xff1a;宿主机构建的一个内部网路 二、NAT和桥接网络链接模式区别 NAT模式&#xff1a;相当于宿主机构建一个内部局域网&a…

全面解析DApp开发中的智能合约设计

在DApp的开发过程中&#xff0c;智能合约的设计起到了至关重要的作用。智能合约是运行在区块链上的程序&#xff0c;负责处理和执行DApp中的逻辑、交易和数据存储。下面我们将深入探讨智能合约的设计原则、挑战和优化方法&#xff0c;帮助开发者掌握如何设计高效、安全的智能合…

锐捷Web认证

文章目录 Web认证二代 Web 认证配置 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Datacom专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月6日11点40分 Web认证 Portal 认证、Web认证 Web认证的介绍 Web 认证使用浏览器进行身份验…

KernelShark在ubuntu24.04.01的编译

KernelShark在ubuntu24.04.01的编译 写在前面具体过程装ubuntu24.04.01安装depends下载代码如何编译cmake 输出make 输出 如何安装 初步启动Add the User to the perf Group 简单的使用trace-cmd抓包 来看我的文章&#xff0c;必有所得。 平凡中&#xff0c;总有我帮您踩过的坑…

解决Unity编辑器Inspector视图中文注释乱码

1.问题介绍 新创建一个脚本&#xff0c;用VS打开编辑&#xff0c;增加一行中文注释保存&#xff0c;在Unity中找到该脚本并选中&#xff0c;Inspector视图中预览的显示内容&#xff0c;该中文注释显示为乱码&#xff0c;如下图所示&#xff1a; 2.图示解决步骤 按上述步骤操作…

【AIGC半月报】AIGC大模型启元:2024.12(上)

【AIGC半月报】AIGC大模型启元&#xff1a;2024.12&#xff08;上&#xff09; &#xff08;1&#xff09;OpenAI-12日发布会&#xff08;持续更新中........&#xff09;Day01-12.06&#xff1a;o1满血版上线&#xff08;已发布&#xff09;Day02-12.07&#xff1a;强化微调&a…

字节码

字节码 1、字节码文件概述 1.1、字节码文件是跨平台的吗&#xff1f; ​ Java 虚拟机不和包括 Java 在内的任何语言绑定&#xff0c;它只与“Class 文件”这种特定的二进制文件格式所关联。 ​ 无论使用何种语言进行软件开发&#xff0c;只要能将源文件编译为正确的Class文件…

排查bug的通用思路

⭐️前言⭐️ APP点击某个按钮没有反应/PC端执行某个操作后&#xff0c;响应较慢&#xff0c;通用的问题排查方法: 从多个角度来排查问题 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何问题可以在评…

AI 建站:Durable

网址&#xff1a;https://app.durable.co 步骤 1) 登录 2&#xff09;点击创建新业务 3&#xff09;填写信息后&#xff0c;点击创建 4&#xff09;进入业务 5&#xff09;生成网站 6&#xff09;生成完成后不满意的话可以自己调整 7&#xff09;点击保存 8&#xff09;发布 …

部署kafka并通过python操作

目录 一、安装JDK1.81、检查服务器是否已安装JDK2、若已安装JDK&#xff0c;进行卸载3、更新yum源4、搜索JDK1.8安装包5、安装JDK1.86、查看是否安装成功7、配置环境变量 二、安装Kafka1、下载并解压kafka部署包至/usr/local/目录2、修改server.properties3、修改/etc/profile4…