Question

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

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

import {RaisedButton} from 'material-ui'

而不是

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

这将使您的构建过程更快，构建输出更小。

我以前认为它完全相同，但实际上，这意味着第二行是像：

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

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

它会产生完全相同的束，对吧？

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

index.js：

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

export default RaisedButton

otherFile.js

import RaisedButton from 'material-ui/RaisedButton'

结果非常符合预期，仅使用import {RaisedButton} from 'material-ui'捆绑包就像 24k LoC （material-ui加载React依赖项）。在一个或两个文件中使用from 'material-ui/ComponentName，，捆绑包将类似 57k LoC 。

我的问题主要是关于性能和最佳实践，少量使用Material-UI我应该总是导入import {Comp1, Comp2, Comp3} from 'material-ui'，但是如果我在一个更大的项目上使用了很多Material-UI组件，它就赢了如果我使用-影响捆绑包大小，因为整个包将在捆绑包中仅导入一次？

Answer 1

是的，这是正确的。通过这样做：

import {RaisedButton} from 'material-ui'

＆＃39; material-ui＆＃39;的根库文件将包括在内。在该文件内部，可能会有很多import RaisedButton from './RaisedButton'语句同时包含库的所有组件（请参阅https://github.com/callemall/material-ui/blob/master/src/index.js）。

这样做的：

import RaisedButton from 'material-ui/RaisedButton'

所有时间都会保证在捆绑大小方面有更好的性能，因为您只会获得所需的依赖项。如果您只使用一些组件，这也将提高构建速度，因为它不需要解析库中其他组件的文件。

如果您正在使用库中的所有或几乎所有组件，那么构建性能应该大致相同，因为如果两个根脚本都是＆＃39; material-ui＆＃39;并且您的文件都需要两次相同的组件，您的捆绑器将足够智能以缓存结果，并且不会重新解析文件。在这种情况下，你的捆绑包会过度导入同样的东西。

我建议使用import RaisedButton from 'material-ui/RaisedButton'语法，因为随着时间的推移，这更适合您的需求，因为您可能并不总是需要所有组件，并且您不可能一次性使用所有组件。此外，一些捆绑包（例如webpack）支持捆绑拆分，使用import {RaisedButton} from 'material-ui'方法并不容易。

Answer 2

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

使用ES2015模块语法（即导入和导出）。

确保没有编译器将您的ES2015模块语法转换为CommonJS模块（这是流行的Babel预设的默认行为   @ babel / preset-env-有关更多详细信息，请参阅文档。）

在项目的package.json文件中添加“ sideEffects”属性。

使用生产模式配置选项可启用各种优化，包括最小化和摇树。

模块导入和解构性能

2 个答案: