在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”分成较小的部分，并将这些较小的部分导出为命名导出。