Question

我正在尝试优化我的供应商bundle.js，因为它已经膨胀，我正在使用material-ui库。

import Card from 'material-ui'; // Very bad as this will import everything

有人可以告诉我两个import语句之间的区别在于导入到您应用中的js代码的大小，或者它们是否相同。

import { Card } from 'material-ui';
import Card from 'material-ui/Card'

Answer 1

import { Card } from 'material-ui';

这会导入使用 material-ui 中默认导出的内容，导入中定义为卡

    // user1 
    {
        "name": "John Bayes",
        "prog_langs": [
            {
                "name": "python",
                "score": 10
            },
            {
                "name": "java",
                "score": 500
            }
        ]
    }        



    // user2 
    {
        "name": "John Russel",
        "prog_langs": [
            {
                "name": "python",
                "score": 100
            },
            {
                "name": "PHP",
                "score": 200
            }
        ]
    }        



    // user3
    {
        "name": "Terry Guy",
        "prog_langs": [
            {
                "name": "C++",
                "score": 600
            },
            {
                "name": "Javascript",
                "score": 200
            }
        ]
    }

这将从 material-ui 导入指定的导出卡（假设卡存在）。

有关详细信息，请参阅以下堆栈溢出帖。

When should I use curly braces for ES6 import?

Answer 2

在这种情况下，它们是相同的。

导入

import { Card } from 'material-ui';

对应于从根导入名为Card的导出成员。查看source code，我们看到它看起来像这样：

export Card from './Card';

从./Card（material-ui/Card）导入default export。

第二次导入

import Card from 'material-ui/Card'

从material-ui/Card导入默认导出，我们刚刚显示的是第一次导入的导出。

因此，它们是相同的。

Answer 3

主要区别在于编译代码。为了提高性能，第一个选择：

import Card from 'material-ui/Card'

是最好的，因为它直接进入您要求的模块。

在第二个选项中：

export Card from './Card'

Babel使用transform-export-extension插件编译代码，因此编译后的代码比第一个选项大。

在lib中导入{module}和在Javascript中从lib /模块导入模块的区别

3 个答案: