javascript - 在 webpack 中更好的 TreeShaking 的正确方法是什么?
问题描述
我想知道,以下两个选项中的哪一个是在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
解决方案
如果我理解您的问题,我认为您要求命名导出优于默认导出以更好地摇树或减小包大小。
为了更好地摇树,建议使用命名导出而不是默认导出。根据这篇文章,
有时您可能会想导出一个具有许多属性的巨大对象作为默认导出。这是一种反模式,并禁止适当的摇树:
因此,不要使用默认导出作为示例 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
,这将减小包大小。
推荐阅读
- python-3.x - Python:递归方法是类方法时返回不同的结果
- angular - Angular 使用 Apollo:单元测试:错误:尚未定义客户端
- deep-learning - 如何使用语言建模方法生成数据序列?
- ruby - 如何使用 ruby 脚本将单个 json 字符串插入到 elasticsearch
- python - 使用python评估excel单元格的性能
- r - R中的排名偏好匹配
- javascript - React Native,在文本字符串中,更改开头带有 # 或 @ 的单词的颜色,就像 twitter
- node.js - 在 Ubuntu 20.04 中安装 nodejs 时出现 python2 错误
- mysql - 用函数计算年龄
- android - 当我想编辑文本时,我的按钮会上升,因为它对底部的约束如何防止这种情况发生?