javascript - 导入一个函数是否需要加载整个库？

Question

我在 StackOverflow 上看到有人说“无需使用 lodash 即可轻松实现这些功能”。

当然，安装库需要时间，但是当你

import { throttle } from 'lodash'

这个导入是否会因为 lodash 是一个大图书馆而减慢页面速度？还是可以，因为我只导入 throttle？

不要特别关注 lodash，而是将其视为一个巨大的库，我尝试只使用其中的一个函数。

附注我正在使用 React(使用 CRA 创建)，因此默认情况下 bundler 是 webpack

Answer 1

如果您使用 webpack、rollup 或其他可将模块转换为单个脚本文件的工具构建此代码，则推送到客户端的内容将在很大程度上取决于您使用的工具。一个简单的构建工具会简单地将整个 lodash 输出到输出脚本中；而像 rollup(也许还有 webpack？)之类的东西会做一些复杂的事情来将库缩减为你正在使用的部分。当然，如果 throttle 函数依赖于 lodash 的其他部分，那么其他部分也必须包含在内。

如果这是在客户端上运行的模块代码(如果它是 import {...} from "./lodash.js" 或如果它使用仍在实验中的 import maps )，事情比这更复杂。浏览器当然必须读取整个 ./lodash.js 文件，否则将无法找到该函数。但据我了解，函数本身的内容在使用之前甚至不会被完全处理。