Какой правильный путь для лучшего TreeShaking в веб-пакете?

Question

Мне было интересно, какой из следующих двух вариантов является правильным способом для лучшего встряхивания дерева в веб-пак :

import { someFeature } from 'someModule'  // Option 1
import { isEmpty } from 'lodash' // Example 1

Или,

import someFeature from 'someModule/someFeature' // Option 2
import isEmpty from 'lodash/isEmpty' // Example 2

Answer 1

Если я понимаю ваш вопрос, я думаю, что вы спрашиваете о преимуществах именованного экспорта по сравнению с экспортом по умолчанию для лучшего встряхивания дерева или уменьшения размера пучка.

Для лучшего встряхивания дерева рекомендуется использовать именованныйэкспорт сверх экспорта по умолчанию.Согласно этой статье ,

Иногда вы можете испытать желание экспортировать один огромный объект со многими свойствами в качестве экспорта по умолчанию.Это антишаблон и запрещает правильное встряхивание дерева:

Поэтому вместо использования экспорта по умолчанию в качестве примера 1 используйте именованный экспорт в качестве примера 2.

Пример 1

// This is default export. Do not use it for better tree shaking
// export.js
 export default {
   propertyA: "A",
   propertyB: "B",
 }
// import.js
import export from './exports';

Пример 2

// This is name export. Use it for better tree shaking
// export.js
 export const propertyA = "A";
 export const propertyB = "B";
// import.js
import { propertyA } from './exports';

Так что в первом примере он будет экспортировать как propertyA, так и propertyB, а во втором - толькоэкспорт propertyA, который уменьшит размер пакета.

Answer 2

Независимо от того, используете ли вы один или два параметра, будет невозможно «сотрясать дерево» неиспользуемых вещей из вашего «someFeature», если это один огромный объект или класс со многими свойствами, и вы используете только некоторые из этих свойств,Поэтому лучшим вариантом было бы разделить ваш «someFeature» на более мелкие фрагменты и экспортировать эти меньшие фрагменты как именованные экспорты.