Webpack是否会自动摇树移除未被引用的默认参数及关联依赖？

直接给结论：moderatelyLargeFile.js会被打包到你的构建产物中，Webpack不会识别到你调用时从未使用这个默认参数，原因如下：

静态分析的局限 #

Webpack的tree-shaking基于ES模块的静态语法分析——它只会检查代码中静态存在的引用关系，而不会去推断运行时的逻辑（比如你调用函数时有没有传参数）。

在你的dependency.js里，moderatelyLargeFile被导入后直接作为函数参数的默认值，这个引用是函数定义的一部分，属于静态存在的依赖。哪怕你在application.js里调用parseSomeFile时总是传入了参数，Webpack也不会去分析这个运行时行为，它只会看到：

• parseSomeFile函数被application.js导入并使用了
• parseSomeFile的定义里引用了moderatelyLargeFile
  所以它会认为这个模块是必要的，不会把它摇掉。

如何避免打包不必要的默认依赖？ #

如果你想让moderatelyLargeFile只在真正需要默认值的时候才被加载，可以把默认值的逻辑改成惰性引入，比如：

方案1：同步惰性加载（使用require）

// dependency.js
import { someParsingFunction1, someParsingFunction2 } from 'somewhere-else-dependency';

export default function parseSomeFile(file) {
  // 只有当未传入参数时才加载大文件
  if (file === undefined) {
    file = require('./moderatelyLargeFile.js').default;
  }
  let parsedResult = { ...someParsingFunction1(file), ...someParsingFunction2(file) };
  return parsedResult;
}

方案2：异步动态加载（使用import()）

如果你的业务允许异步逻辑，可以用动态import来拆分chunk，进一步优化初始加载体积：

// dependency.js
import { someParsingFunction1, someParsingFunction2 } from 'somewhere-else-dependency';

export default async function parseSomeFile(file) {
  if (file === undefined) {
    const { default: moderatelyLargeFile } = await import('./moderatelyLargeFile.js');
    file = moderatelyLargeFile;
  }
  let parsedResult = { ...someParsingFunction1(file), ...someParsingFunction2(file) };
  return parsedResult;
}

这样修改后，当你调用parseSomeFile并传入参数时，moderatelyLargeFile.js就不会被打包进主chunk，只有当需要用到默认值时才会被加载。

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