Question

像这样从material-ui导入内容有什么区别

import { Paper } from '@material-ui/core'

vs。这样，它在我的Webpack设置中的工作方式完全相同：

import Paper from '@material-ui/core/Paper'

这些导入方法中是否有任何一种在生成的包大小方面代价高昂？

注意：

我在用Create-React-App引导的项目中使用它，而我正在使用的Create-Reac-App使用Webpack v3.5.1

Answer 1

对于import { Paper } from '@material-ui/core'，您是从@material-ui/core模块导入名为Export的Paper，该模块包含其他命名的Export。

对于import Paper from '@material-ui/core/Paper'，您是从@material-ui/core/Paper模块导入默认导出，该模块仅包含Paper并将其导出为默认值。

某些库采用这种方法来公开带有命名导出的主脚本以及每个函数的单独模块。例如，Lodash。您可以同时进行import { find } from 'lodash'和import find from 'lodash/find'。在这两种情况下，您将获得相同的find函数。

关于优缺点，取决于捆绑程序配置和库使用的模块系统，这：import { Paper } from '@material-ui/core'可能不会摇摇欲坠，您最终将整个捆绑包中的'@material-ui/core'。

此：import Paper from '@material-ui/core/Paper'肯定只会始终将Paper添加到您的捆绑代码中。

Answer 2

import { something } from 'test-m'意味着test-m上面有一个named export，即：

module.exports = { something: 'other string' }

甚至使用es6语法：

export const something = 'other string'

-

import something from 'test-m' =>意味着test-m具有default exports，即：

module.exports = 'other string'

或使用es6语法export default 'other string'

这如何影响捆绑？好吧，命名出口是必经之路。为什么？

命名出口仅从每个模块导入必需的内容，因此，通过使用命名出口，捆绑程序可以对模块进行树状摇动，仅从模块中取出必需的东西。此过程将减少最终模块的大小。与默认的导出相比，捆绑程序会将整个模块拉到整个块中，尽管您使用了该模块提供的一项或全部功能。

TL; TR：命名的出口===降低了捆束的大小。

Answer 3

第一次导入将导入默认的类导出。而第二次导入仅导入导出的函数/对象。在React中导入Jest测试时，这是一个非常普遍的区别。

以Redux连接的组件为例：

export class ReduxConnect {

  render(){
    return (<h1> Some component </h1>);
  }

}

export const mapStateToProps = state => ({
  something: state.something
});

export default connect(mapStateToProps)(ReduxConnect);

执行import ReduxConnect将导入默认导入，默认导入在底部定义，该导出导出redux连接的组件。 import {ReduxConnect, mapStateToProps}可以让您选择从类中分别导出对象/函数。在这种情况下，区别在于导入Redux连接的组件与纯组件本身。

这些使用Webpack导入模块的方式之间有什么区别？

3 个答案: