本文探讨了前端开发中 import 语句过多导致代码混乱的问题，并提供了多种优化方案。主要方法包括使用模块重导简化路径、利用 require.context 动态管理路由、采用动态 import 实现按需加载、谨慎使用 ProvidePlugin 注入全局变量、以及利用 TypeScript 命名空间消除类型导入。此外，还介绍了 Webpack 别名、Prettier 配置、全局组件加载及 babel-plugin-import 等辅助手段。文章强调在提升开发效率的同时，需注意包体积控制和代码可维护性，帮助开发者构建更整洁的代码结构。
如果打开一个文件，看到的全是满屏幕的 import 语句，这将是一种怎样的体验？
密密麻麻的 import 语句不仅仅是一种视觉上的冲击，更是对代码组织结构的一种考验。我们是如何做到让 import'占领满屏'的了，又该如何优雅地管理这些 import 语句呢？本文将从产生大量 import 语句的原因、可能带来的问题以及如何优化和管理 import 语句几个角度来进行探讨。
模块重导是一种通用的技术。在腾讯、字节、阿里等各大厂的组件库中都有大量使用。
如：字节的 arco-design 组件库中的组件。通过重导在 components/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'
Re-export 一般用于收拢同类型的模块，一般都是以文件夹为单位，如 components、routes、utils、hooks、stories 等都通过各自的 index.tsx 暴露，这样就能极大程度的简化导入路径、提升代码可读性、可维护性。
Re-export 的几种形式
直接从另一个模块重导出特定的成员。
export { foo, bar } from './moduleA';
从另一个模块导入成员，可能会重命名它们，然后再导出。 默认导出也可以重命名并重导出。
// 通过 export 导出的
export { foo as newFoo, bar as newBar } from './moduleA';
// 通过 export default 导出的
export { default as ModuleDDefault } from './moduleD';
将另一个模块的所有导出成员作为单个对象重导出。（注意：整个导出不会包含 export default）
export * from './moduleA';
首先导入模块中的成员，然后使用它们，最后将其重导出。
import { foo, bar } from './moduleA';
export { foo, bar };
通过这些形式，我们可以灵活地组织和管理代码模块。每种形式都有其适用场景，选择合适的方式可以帮助我们构建出更清晰、更高效的代码结构。
require.context 是一个非常有用的功能，它允许我们动态地导入一组模块，而不需要显式地一个接一个地导入。
只需一段代码让你只管增加文件、组件,将自动收拢重导。
在项目路由、状态管理等固定场景下极其好使（能提效、尽可能避免了增加一个配置要动 N 个文件的情况）
尤其是在配置路由时、产生大批量的 import（多少个页面就得导入多少个 import😅）
// 不使用 require.context
import A from '@/pages/A'
import B from '@/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 也能实现类似 require.context 的功能、动态收拢模块。
const Component = await import('./Component');
这种方式支持按需加载，有助于减小首屏体积。
webpack.ProvidePlugin 是个好东西，但也不能滥用。
项目中用到的变量/函数/库或工具，只要配置后就可以在任何地方使用了。
相信我–看完这个示例，如果你没用过、那你肯定会迫不及待的想要尝试了🤗
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 等，而不需要导入它
小结：
另外，如果是 Vite 项目可以使用 vite-plugin-inject 代替 ProvidePlugin 的功能。
// 配置
import inject from 'vite-plugin-inject';
...
plugins: [
inject({
// 键是你想要提供的全局变量，值是你要提供的模块
dayjs: 'dayjs', // 例如，这将在全局范围内提供 'dayjs'，可以通过 dayjs 访问
// 你可以继续添加其他需要全局提供的模块
}),
]
...
如果使用了 TS，记得配置下类型：
// globals.d.ts 文件 处理全局类型
import dayjs from 'dayjs';
declare global {
const dayjs: typeof dayjs;
}
// tsconfig.json 文件 也配置一下
{
"compilerOptions": {
// 编译选项...
},
"include": [ "src/**/*", "globals.d.ts" ] // 确保 TypeScript 包括这个文件
}
在 TS 项目中，满屏 import 肯定少不了 TS 的份。但如果合理配置，必定能急剧减少 import 的导入。
这里介绍下自己在项目中使用最多的方法：TS 命名空间。有了它既能让类型模块化，更过分的是在使用时可以直接不导入类型😅。
同样，它和 ProvidePlugin 一样炸裂，可以直接灭掉 import 导入。
使用示例：
// accout.ts
declare namespace IAccount {
type IList<T = IItem> = {
count: number
list: T[]
}
interface IUser {
id: number;
name: string;
avatar: string;
}
}
// 任意文件直接使用，无需导入
const [list, setList] = useState<IAccount.IList|undefined>();
const [user, setUser] = useState<IAccount.IUser|undefined>();
注意⚠️eslint 可能需要配置下开启🔛使用命名空间。
React 似乎也意识到不妥：在 17 版本之前，由于 jsx 的特性每个组件都需要明文引入 import React from 'react'，但在这之后由编译器自行转换，无需引入 React。如果你使用的React17之前的版本也可以通过修改 babel 达到这个目的，有非常详细的说明。（也提供了自动去除引入的脚本）
既能缩短导入路径、也能更有语义化。
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';
值设置的太小可能会导致频繁换行、给够难以阅读。其值在 120 较为合适吧（看团队实际的使用情况）。
{
"printWidth": 120,
...
}
在入口文件引入全局组件，使用 require.ensure 或 import 根据条件动态加载组件，既能便于维护、减少引用、也能减少性能开销。
// 异步加载全局弹窗，减少性能开销
Vue.component('IMessage', function (resolve) {
// 指定条件全局加载，无需在具体页面中引用
if (/^\/pagea|pageb/.test(location.pathname)) {
require.ensure(['./components/message/index.vue'], function() {
resolve(require('./components/message/index.vue'));
});
}
});
babel-plugin-import 不是直接减少 import 的数量，而是通过优化 import 语句来减少打包体积，提高项目的加载性能。这对于使用了大型第三方库的项目来说是一个非常有价值的优化手段。
以 arco-design 为例：
// .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 文件。
// 业务中使用
import { Button } from '@arco-design/web-react';
// 将被 babel 编译成
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😂🤣😅😇。
只有想不到的，没有做不到的。只要你想、相信就一定能如愿以偿。
在实际工程中，建议遵循以下原则：
babel-plugin-import 或动态 import，以减少首屏资源体积。通过上述组合拳，可以有效解决 import 语句泛滥的问题，提升代码的可读性和项目的可维护性。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online