Как импорт целых модулей влияет на производительность и размер пакета?

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 и File C. js будут импортировать весь FileA. js. Это потому, что function1 и function2 оба определены в одном файле. Как только вы импортируете один из них, вы загрузите весь файл FileA. js.

Как вы можете сделать это более эффективным? Допустим, FileB. js изначально загружен вместе с вашей целевой страницей. Файл C. js необходим на другой странице и будет загружен позднее.

В настоящее время вы должны загрузить FileA. js и FileB. js полностью.

Поскольку FileB. js использует только функцию1, вы можете создать отдельный файл, содержащий только эту функцию:

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

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

Теперь вы загружаете только определение функции для function1 и FileB. js , Таким образом, вы уменьшили изначально загруженный пакет по определению функции 2.