清理满屏 import，我试过的几个实用方法

具体用哪种，得看场景。如果一个模块导出的东西太多，又不想全暴露，那就挑着重命名导出；如果只是聚合一下现有模块，export * 最省事。

二、require.context：批量导入的利器

Webpack 的 require.context 能动态导入一组模块，这在处理路由、状态管理这种固定模式时特别方便。比如你有一个 pages 目录，每加一个页面就要多写一行 import，用 require.context 就能自动收集。

// 不用 require.context
import A from '@/pages/A'
import B from '@/pages/B'
// ... 没完没了

// 用 require.context 收拢
const routesContext = require.context('./routes', false, /.ts$/);
const routes = [];
routesContext.keys().forEach(modulePath => {
  const route = routesContext(modulePath);
  routes.push(route.default || route)
});
export default routes;

这样以后加页面文件，路由配置会自动跟上，不用再手动改那堆 import。缺点是它和 Webpack 强绑定，如果你用 Vite 就得另找办法，比如 import.meta.glob。

三、动态导入：按需加载顺便减少首屏体积

动态 import() 也能实现类似的批量导入，还支持按需加载，对首屏性能友好。

const Component = await import('./Component');

如果只是想少写几行 import，可以结合 import.meta.glob（Vite 环境下）或自己写个工具函数来动态加载模块，效果和 require.context 差不多。

四、ProvidePlugin：全局注入，省去重复引用

webpack.ProvidePlugin 可以把一些到处用的库注入成全局变量，比如 lodash、dayjs，或者你自己的工具函数。

// webpack 配置
const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react',
      _: 'lodash',
      dayjs: 'dayjs',
      Utils: path.resolve(__dirname, 'src/utils.js')
    })
  ]
};

配置完以后，代码里就可以直接写 _.merge(...)，不用 import _ from 'lodash'。

但这东西别滥用。 全局变量会让依赖关系变得隐晦，后来接手的人可能会搞不清 Utils 是从哪来的。我自己只在一些工具库特别稳定、且项目里几乎每个文件都会用到的场景下才用，比如 dayjs。对于按需加载的模块，还是动态 import() 更稳妥，能控制代码分割。

如果是 Vite 项目，可以用 vite-plugin-inject 实现类似功能：

import inject from 'vite-plugin-inject';
plugins: [
  inject({
    dayjs: 'dayjs',
  }),
]

再配合 TypeScript 的全局类型声明：

// globals.d.ts
import dayjs from 'dayjs';
declare global {
  const dayjs: typeof dayjs;
}

// tsconfig.json 里加上
{
  "compilerOptions": {},
  "include": ["src/**/*", "globals.d.ts"]
}

五、TypeScript 命名空间：连类型导入都省了

TypeScript 的类型如果到处 import type，一样会占满屏幕。Namespace 可以帮上忙：把类型声明放进命名空间，然后在任何文件里直接使用，不用导入。

// 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 之后已经不需要手动 import React from 'react'，编译器会自动处理。如果你还在用老版本，也可以通过 babel 配置来去掉这个重复的 import，类似的优化工具不少。

六、其他顺手的小优化

• 设置路径别名：webpack 或 tsconfig 里配置 alias，把 ../../../../ 变成 @components/，路径短了，视觉噪音少很多。

  resolve: {
    alias: {
      '@src': path.resolve(__dirname, 'src/'),
      '@components': path.resolve(__dirname, 'src/components/'),
      '@utils': path.resolve(__dirname, 'src/utils/')
    }
  }
  

• 调整 Prettier 的 printWidth：默认 80 在某些项目里会导致 import 频繁换行，反而占更多行。我习惯设成 120，让较长的导入语句尽量保持在一行，团队协商着定就行。

  {
    "printWidth": 120
  }
  

• 条件动态挂载全局组件：在一些入口文件里根据路由条件按需加载全局弹窗或通知组件，既减少不必要的引用，也降低首屏开销。

  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 做按需加载：如果用了像 arco-design 这样的组件库，这个插件能把全量导入自动转成按需，减小打包体积，间接也清理了多余的样式导入。

  // .babelrc
  {
    "plugins": [
      ["import", {
        "libraryName": "@arco-design/web-react",
        "libraryDirectory": "es",
        "style": true
      }, "@arco-design/web-react"]
    ]
  }
  // 业务代码
  import { Button } from '@arco-design/web-react';
  // 编译后 →
  import Button from '@arco-design/web-react/es/button';
  import '@arco-design/web-react/es/button/style/css.js';
  

收个尾

满屏 import 不是一天长出来的，往往是模块设计慢慢腐化的结果。上面这些方法不是让你全盘照搬，而是根据项目现状挑着用：如果模块导出分散，优先上重导出；路由页面太多，就用批量导入；如果某几个工具库到处都是，ProvidePlugin 能省不少事。

总的原则挺简单：保持依赖边界清晰，别让全局变量满天飞；按需加载能上的就上，首屏时间紧着呢；类型能用命名空间但要管住范围。

把这些工具和习惯用到日常开发里，你的文件大概率不会再被 import 淹没了。