所以我最近开始学习 react 并注意到所有文档都有看起来像 else 的导入:
import { Apples, Bananas, Oranges } from 'fruits';
但是在研究 react 时,我发现这种语法也能正常工作:
import * as Fruits from 'fruits';
我的问题:使用 import all 语法是否有任何性能损失或逻辑冲突?
如果没有,那么我将继续使用该语法。我宁愿更详细一点,而不必担心确保所有内容都已导入。
所以我最近开始学习 react 并注意到所有文档都有看起来像 else 的导入:
import { Apples, Bananas, Oranges } from 'fruits';
但是在研究 react 时,我发现这种语法也能正常工作:
import * as Fruits from 'fruits';
我的问题:使用 import all 语法是否有任何性能损失或逻辑冲突?
如果没有,那么我将继续使用该语法。我宁愿更详细一点,而不必担心确保所有内容都已导入。
最好使用第一种方式。至少对于一件事:Always write explicitly what you want to use
。这是所有框架/语言的最佳实践。
如果你有一些摇树,一些未使用的module将不会被加载,一切都应该是好的(就像@zerkms 说的)。但这是在最好的情况下,即使是最好的摇树也不是完美的,即使您不使用它们,您仍然可以导入一些导入。如果您的项目“小”,应该没问题。如果在你的项目中你加载了数百个东西,它可能会有点不同。
当您构建项目时,您也会浪费时间进行摇树分析。
因此,仅仅因为您不想“通过写两个词来浪费时间”,您就会在每次构建时浪费时间,并且可能会对性能产生影响
实际上 - 这取决于给定module的出口量。
如果您导入例如Lodash
您可能不想导入整个库,您应该只导入您将在应用程序中使用的这些方法:
import { isEmpty, pickBy, orderBy } from 'lodash';
以避免性能损失和内存浪费。
但是,如果您给定的module只包含几个方法,或者基本上您将使用每个导出,那么您可以自由使用该快捷方式:
import * as Fruits from 'fruits';
注意:我想您正在使用webpack 2
,它实际上包含三抖动算法,可以缩小包。
这取决于您使用的module捆绑器。如果你使用 > webpack 2.0 作为你的打包器,那么它会影响包的大小,因为:
import { Apples, Bananas, Oranges } from 'fruits';
只会带来Apples
,Bananas
并且Oranges
来自文件,因为 webpack 2.0 使用tree-shaking
算法进行优化。此外,在这种情况下,您需要注意不要default export
在文件中执行任何操作,而是导出,const
因为命名导出就足够了。
import * as Fruits from 'fruits';
只会带来fruits
文件中声明的所有内容。
我在 twitter 上找到了与 Dan Abramov 的精彩对话,应该会对你有所帮助。
编辑
如果是 lodash,你可能想使用babel-lodash-plugin。如果您使用它,那么您将不必这样做
import {isEmpty, isUndefined} from 'lodash';
你可以做
import _ from 'lodash';
因为它不会为您带来整个图书馆。