Question

我想知道，以下两个选项中的哪一个是在 webpack 中更好地摇树的正确方法：

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

如果我理解您的问题，我想您是在要求命名出口优于默认出口的好处，以便更好地摇动树木或减小捆束的大小。

为了更好地摇树，建议使用命名导出而不是默认导出。根据此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，这将减小分发包的大小。

Answer 2

无论您是使用选项一还是二，如果这是一个具有许多属性的巨大对象或类，而您仅使用其中一些属性，则不可能从“ someFeature”中“摇树”未使用的东西。因此，最好的选择是将“ someFeature”切成小块，然后将这些小块作为命名导出导出。

什么是在Webpack中更好地进行TreeShaking的正确方法？

2 个答案: