我想知道以下两个选项中哪一个是更好的正确方法摇树 in webpack:
import { someFeature } from 'someModule' // Option 1
import { isEmpty } from 'lodash' // Example 1
Or,
import someFeature from 'someModule/someFeature' // Option 2
import isEmpty from 'lodash/isEmpty' // Example 2
如果我理解您的问题,我认为您是在询问命名导出相对于默认导出的好处,以实现更好的树摇动或减小包大小。
为了更好地进行树摇动,建议使用命名导出而不是默认导出。根据这个article https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad,
有时,您可能会想将具有许多属性的一个巨大对象导出为默认导出。这是一种反模式,会禁止适当的摇树:
因此,不要使用默认导出作为示例 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
and propertyB
而在第二个中它只会导出propertyA
这将减少捆绑包的大小。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)