在 webpack 中更好的 TreeShaking 的正确方法是什么？答案

【问题标题】：What is the right way for better TreeShaking in webpack?在 webpack 中更好的 TreeShaking 的正确方法是什么？
【发布时间】：2019-11-10 23:02:57
【问题描述】：

我想知道，以下两个选项中的哪一个是在 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

【问题讨论】：

您阅读文档了吗？ webpack.js.org/guides/tree-shaking
您提供的代码示例不可互换，所以我不明白这里的真正问题是什么？您是在问是否应该使用默认导出而不是命名？因为在这个例子中，这里在摇树方面没有区别
这完全取决于someModule 和someModule/someFeature 的实现。请张贴。
@Bergi 如果该模块是第三方库，lodash 会怎样？
@UtkarshPramodGupta 那么这仍然取决于他们如何实现他们的导出 - 请发布它们（但减少到一个最小的例子）。具体到 lodash，it has its own problems 因为它还没有使用 ES6 导出，所以有各种解决方法（从子包导入，使用 'lodash-es'，使用修复 lodash 的 babel 插件，...）。

标签： javascript webpack ecmascript-6 es6-modules tree-shaking

【解决方案1】：

如果我理解您的问题，我认为您是在询问命名导出相对于默认导出的好处，以便更好地摇树或减小包大小。

为了更好地摇树，建议使用命名导出而不是默认导出。根据这个article，

有时您可能会想导出一个具有许多属性的巨大对象作为默认导出。这是一种反模式并且禁止适当的摇树：

所以不要使用默认导出作为示例 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，这将减小包大小。

【讨论】：

嗨，@Farhad 感谢您的友好回复。请阅读更新后的问题。
@UtkarshPramodGupta 树摇晃主要取决于您导出的方式而不是导入方式。如果您专门研究 lodash，那么这是一个很好的阅读 azavea.com/blog/2019/03/07/lessons-on-tree-shaking-lodash。让我知道它是否对您有帮助，然后我会更新我的答案

【解决方案2】：

无论您使用选项一还是二，如果这是一个具有许多属性的巨大对象或类并且您只使用其中一些属性，则无法从“someFeature”中“摇晃”未使用的东西.所以最好的选择是将你的“someFeature”分成更小的部分，并将这些更小的部分导出为命名导出。

【讨论】：