模块导入和解构性能

Question

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

请注意,在上面的示例中,我们使用了:

import RaisedButton from 'material-ui/RaisedButton'

代替

import {RaisedButton} from 'material-ui'

这将使您的构建过程更快,并且您的构建输出更小.

我以前认为它完全相同,但实际上,这意味着第二行是像下面一样:

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)

otherFile.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',在一个或两个文件(S) ,捆绑将会像57K控制线.

我的问题主要是关于性能和最佳实践,少量使用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'

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

如果您正在使用库中的所有或几乎所有组件,那么构建性能应该大致相同,因为如果'material-ui'的根脚本和您的文件都需要两次相同的组件,那么您的捆绑器将足够聪明缓存结果,不会重新解析文件.在这种情况下,您的捆绑包将过度导入同样的东西.

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