JavaScript动态导入特定函数而非整个模块的技术问询

1. 你提供的示例仍会导入整个模块 #

你贴的代码里，await import('./file1')会完整加载整个file1模块文件，之后的解构赋值const { default: defaultExport } = ...只是从加载完成的模块对象中提取你需要的默认导出函数，并没有减少实际加载的代码体积——整个模块的所有内容都会被浏览器/运行环境解析、执行。

2. 实现真正按需导入特定函数的方式 #

目前没有原生ES语法支持直接动态导入模块中的单个函数（跳过模块其他内容），但可以通过以下两种方式实现近似的“仅加载目标函数”效果：

拆分模块结构 #

把体积大的模块拆分成多个独立的子模块，每个子模块只导出一个或少量相关函数。比如原本的大模块utils.js包含多个函数，拆成utils/calculate.js、utils/format.js等小文件，然后直接动态导入目标子模块：

async function loadCalculate() {
  const { default: multiply } = await import('./utils/calculate.js');
  multiply(315, 414);
}

这种方式能确保只加载目标函数所在的代码文件，是最直接的按需加载方案。

配合打包工具的Tree Shaking优化（静态导入场景） #

如果你的项目使用Webpack、Vite、Rollup这类支持Tree Shaking的打包工具，且模块采用ES模块规范（使用export/import，而非CommonJS的module.exports），那么静态导入特定函数时，打包工具会自动剔除模块中未被使用的代码：

// 静态导入，打包后只会包含multiply相关代码
import { multiply } from './big-utils.js';
multiply(315, 414);

注意：动态导入await import('./big-utils.js')仍然会加载整个模块，Tree Shaking无法在动态导入时精准拆分单个函数（因为动态导入的模块是运行时加载的，打包工具无法提前确定你会提取哪些导出）。

内容的提问来源于stack exchange，提问作者EBDS