javascript - 导入整个模块如何影响性能和包大小？

Question

用简单示例描述问题

让我们的文件 A 有 2 个命名导出:

//FileA.js
export function1(){}
export function2(){}

让我们比较一下 3 种情况:

情况1:

//FileB.js:
import { function1 } from './A'
function1()

//FileC.js:
import { function2 } from './A'
function2()

案例2:

//FileB.js:
import * as f from './A'
f.function1()

//FileC.js:
import * as f from './A'
f.function2()

案例3:文件 A 导出包含以下函数的命名对象:

//FileA.js
export const f = {
  function1: () => {},
  function2: () => {}
}

//FileB.js:
import { f } from './A'
f.function1()

//FileC.js:
import { f } from './A'
f.function2()

问题是考虑到将这些模块与Webpack捆绑在一起，哪种情况在内存和性能方面更有效(并且解释为什么也很棒 - 因为它看起来像在生成的包中应该有所有相同的功能...)？

很明显，在这个简单的情况下，性能几乎相同(仅为了简单说明而给出)。

Answer 1

在上述所有情况下，FileB.js 和 FileC.js 将导入整个 FileA.js。这是因为 function1 和 function2 都在 1 个文件中定义。一旦导入其中一个，您将加载整个文件 FileA.js。

如何才能提高效率？假设 FileB.js 最初随您的登陆页面一起加载。另一个页面需要 FileC.js，稍后会加载。

目前，您将完全加载 FileA.js 和 FileB.js。

因为 FileB.js 仅使用 function1，所以您可以创建一个单独的文件，仅包含此函数:

//FileA_1.js
export default function1(){}

//FileB.js:
import function1 from './A_1'
function1()

现在您只加载 function1 和 FileB.js 的函数定义。因此，您通过 function2 的定义减少了最初加载的包。