Javascript 模块导入和解构性能

我最近阅读了Material UI的文档：

请注意，在上面的示例中，我们使用了：

从“物料界面/RaisedButton”导入RaisedButton

而不是

从“物料界面”导入{RaisedButton}

这将使生成过程更快，生成输出更小。

我曾经认为这是完全一样的，但实际上，这意味着第二行就像：

import materialUI from 'material-ui'
const {RaisedButton} = materialUI

它将产生完全相同的束，对吗

我做了一些测试，比较了捆绑包的大小，使用了两个文件导入的不同组合：

index.js：

import RaisedButton from 'material-ui/RaisedButton'
// or import {RaisedButton} from 'material-ui'
import file from './otherFile.js'

console.log(RaisedButton)
console.log(file)

otherFile.js

import RaisedButton from 'material-ui/RaisedButton'
// or import {RaisedButton} from 'material-ui'

export default RaisedButton

仅使用“物料ui/RaisedButton”中的导入RaisedButton，结果与预期完全一致。捆绑包将类似于24k LoC（物料ui加载反应依赖项）。在一个或两个文件中，使用从“物料界面”导入{RaisedButton}，包将类似于57k LoC

---

我的问题主要是关于性能和最佳实践，对于材料UI的少量使用，我应该总是从“材料UI/ComponentName导入

，但是如果我在一个更大的项目上使用大量材料UI组件，如果我使用
导入{Comp1，Comp2，Comp3}，它不会影响捆绑包的大小从“物料界面”
，因为整个包装只会在捆绑包中导入一次？
是的，这是正确的。通过这样做：

import {RaisedButton} from 'material-ui'

将包括“材质ui”的根库文件。在该文件内部，可能会有许多“/RaisedButton”的
import-RaisedButton
语句一次包含库的所有组件（请参阅）

做：

import RaisedButton from 'material-ui/RaisedButton'

由于您只能获得所需的依赖项，因此始终可以保证在捆绑包大小方面获得更好的性能。如果只使用几个组件，这也将提高构建速度，因为它不需要解析库中其他组件的文件

如果您正在使用库中的所有或几乎所有组件，构建性能应该大致相同，因为如果“material ui”的根脚本和文件都需要相同的组件两次，那么绑定器将足够智能，可以缓存结果，并且不会重新解析文件。在这种情况下，你的捆绑机将使进口同样的东西成为一种廉价的操作

我建议使用“material ui/RaisedButton”中的
导入RaisedButton
语法，因为随着时间的推移，这更适合您的需要，因为您可能并不总是需要所有组件，并且不太可能同时使用所有组件。此外，一些捆绑包（如webpack）支持捆绑包拆分，这对于从“material ui”导入{RaisedButton}

方法来说并不容易。

如果使用webpack，则解构语法应该有助于从输出文件中删除未使用的Javascript，因为，只要满足以下条件（引自webpack网站）：

• 使用ES2015模块语法（即导入和导出）
• 确保没有编译器将ES2015模块语法转换为CommonJS模块（这是流行的Babel预设的默认行为） @巴别塔/预设环境-有关更多详细信息，请参阅文档）
• 在项目的package.json文件中添加“sideEffects”属性
• 使用生产模式配置选项启用各种优化，包括缩小和树摇

---

好的，谢谢你的澄清。我想确保在任何情况下，捆绑包中都不会多次包含任何内容。当我使用该语法时，我从未能够使其正常工作。有人知道还有什么其他条件会破坏这一点吗？