在webpack中更好的TreeShaking的正確方法是什么？

Question

我想知道，以下兩個選項中的哪一個是在webpack中更好的Tree Shaking的正確方法：

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 ，這將減少bundle的大小。

Answer 2

無論你使用選項一還是二，如果那是一個巨大的對象或具有許多屬性的類而你只使用其中一些屬性，那么就不可能從“someFeature”中“樹”掉未使用的東西。 因此，最好的選擇是將“someFeature”分成較小的部分，並將這些較小的部分導出為命名導出。