javascript - 模块导入和解构性能

Question

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

Notice that in the above example, we used:

import RaisedButton from 'material-ui/RaisedButton'

instead of

import {RaisedButton} from 'material-ui'

This will make your build process faster and your build output smaller.

我以前以为是一模一样的，其实，这意味着第二行就是这样:

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

它会生成完全相同的包，对吗？

我做了一些测试，使用导入 2 个文件的不同组合来比较包大小:

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)

其他文件.js

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

export default RaisedButton

仅使用 import RaisedButton from 'material-ui/RaisedButton' 结果与预期相当， bundle 将类似于 24k LoC(material-ui 加载 React 依赖项).使用 import {RaisedButton} from 'material-ui'，在一个或两个文件中， bundle 将类似于 57k LoC .

我的问题主要是关于性能和最佳实践，使用少量的 Material-UI 我应该总是导入 from 'material-ui/ComponentName，但如果我使用大量的 Material-UI组件在一个更大的项目中，如果我使用 import {Comp1, Comp2, Comp3} from 'material-ui' 不会影响包大小，因为整个包将被导入只有一个束中的时间？

Answer 1

是的，没错。通过这样做:

import {RaisedButton} from 'material-ui'

将包含“material-ui”的根库文件。在该文件中，它可能有很多 import RaisedButton from './RaisedButton' 语句以一次包含库的所有组件(参见 https://github.com/callemall/material-ui/blob/master/src/index.js )。

正在做:

import RaisedButton from 'material-ui/RaisedButton'

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

如果您正在使用库中的所有或几乎所有组件，构建性能应该大致相同，因为如果“material-ui”的根脚本和您的文件都需要相同的组件两次，您的 bundler 将足够聪明以缓存结果并且不会重新解析文件。在这种情况下，您的 bundler 将使过度导入相同的东西成为一种廉价的操作。

我建议使用 import RaisedButton from 'material-ui/RaisedButton' 语法，因为随着时间的推移，这会更适应您的需求，因为您可能并不总是需要所有组件，而且它将是您不太可能同时使用所有这些。此外，一些打包器(例如 webpack)支持打包拆分，这对于 import {RaisedButton} from 'material-ui' 方法来说并不容易。