Vue导入方法三种方式对比

Vue导入方法三种方式对比

import * as xxx from 'xxx' 不算最主流，但属于合法、成熟、很多中大型项目会用的写法，不是冷门野路子；只是日常最常见的是「按需命名导入」。

1. import { funcA, funcB } from 'xxx' 按需导入【最流行 ✅】
   社区首选，极致 tree-shaking，库（lodash、element-plus）文档基本全是这种。
   适合：只拿少量函数，追求最小包体积。

   import { postNetData } from '@/helper/netHelper'

2. import * as netHelper from '@/helper/netHelper' 命名空间导入【比较常用，中等流行】
   很多内部工具类、helper 集合大量方法时，团队喜欢这种。
   ✅ 优点：

   • 调用统一前缀 netHelper.xxx()，溯源清晰，一眼知道这个方法来自哪个工具模块；
   • 命名空间隔离，不会出现变量命名冲突；
   • 适合一组强相关的工具函数（就是你现在 netHelper 场景）；
   • Vite / Webpack 支持 tree-shaking（这点很多人不知道）
     ❌ 缺点：
   • 编辑器自动导入的时候，不会自动生成这种，手动写；
   • 如果模块特别大、一次性导入全部，部分老打包工具优化会弱一点（但你的 netHelper 完全不存在这个问题）

3. import netHelper from 'xxx' 默认导入【流行，多用于单个主体 / 类】
   适合：模块只导出一个核心对象 / 类 （axios、vue、pinia）。
   不适合：一堆零散函数集合，容易丢失 tree-shaking。

什么时候大家会选 import * as（和你场景一模一样）

当一个模块是同一系列工具方法合集（请求工具、通用校验、文件工具），希望调用的时候带上统一前缀，区分来源：

netHelper.postNetData()
validator.checkPhone()
dateUtil.formatTime()

👉 这种带命名前缀的写法，在企业后台管理项目（若依这类）特别常见。

社区怎么看待它？

• 没有任何规范禁止；ES6 标准原生语法；
• 很多团队的 ESLint 不会禁用 import * as，只是部分团队有风格偏好，优先按需导入；
• 业界共识：不是坏写法，属于风格取舍，看团队编码约定

对你的场景评价

你的场景：netHelper 是一组配套网络请求方法，需要溯源、看来源，统一前缀调用

👉 import * as netHelper 非常合适，完全不用觉得是小众写法。

简单取舍建议

• 开源公共类库：优先 import { xxx } 按需导入（追求极致包大小）
• 项目内部业务工具 helper：import * as xxx 非常舒服，可读性溯源更好

小补充：唯一一个小坑提醒

import * as netHelper from '@/helper/netHelper'

这个 netHelper 是只读命名空间对象，你不能修改它，不能给它追加属性，但是你只是调用方法，完全不受影响。