为什么不应该在 ES6 中使用 import all

IT技术 javascript reactjs ecmascript-6 es6-modules
2021-05-18 20:55:13

所以我最近开始学习 react 并注意到所有文档都有看起来像 else 的导入:

import { Apples, Bananas, Oranges } from 'fruits';

但是在研究 react 时,我发现这种语法也能正常工作:

import * as Fruits from 'fruits';

我的问题:使用 import all 语法是否有任何性能损失或逻辑冲突?

如果没有,那么我将继续使用该语法。我宁愿更详细一点,而不必担心确保所有内容都已导入。

3个回答

最好使用第一种方式。至少对于一件事: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 的精彩对话,应该会对你有所帮助。

https://twitter.com/dan_abramov/status/927835086577430529

编辑

如果是 lodash,你可能想使用babel-lodash-plugin如果您使用它,那么您将不必这样做

import {isEmpty, isUndefined} from 'lodash';

你可以做

import _ from 'lodash';

因为它不会为您带来整个图书馆。