Question

所以我最近开始学习反应并注意到所有文档都有类似的其他导入：

/**
 * Handle the 'code' delete request.
 *
 * @param integer $id            The id of the code to fetch.
 * @param DeleteRequest $request The request to handle the data.
 * @return response
 */
public function deleteCode($id, DeleteRequest $request)
{
    dd($request->all());
}

但是在学习反应时我发现这种语法同样适用：

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

我的问题：使用import all语法是否存在性能损失或逻辑冲突？

如果没有，那么我将继续使用该语法。我宁愿更加冗长，也不必担心确保所有东西都被导入。

Answer 1

实际上 - 它取决于给定模块的出口量。

如果您导入，例如Lodash您可能不想导入整个库，只应导入要在应用程序中使用的这些方法：

import { isEmpty, pickBy, orderBy } from 'lodash';

以避免性能损失和内存浪费。

但是，如果您的模块仅包含几种方法，或者基本上您将使用每次单次导出，那么您可以自由使用该快捷方式：

import * as Fruits from 'fruits';

注意：我认为您使用的是webpack 2，其中实际上包含了三摇算法，这使得捆绑可能成为可能。

Answer 2

这取决于您使用的模块捆绑器。如果你正在使用＆gt; 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文件中声明的所有内容。

我在推特上发现了与丹·阿布拉莫夫的精彩对话，这对你有帮助。

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

修改

如果是lodash，您可能想要使用babel-lodash-plugin。如果您使用它，那么您将无法做到

import {isEmpty, isUndefined} from 'lodash';

你可以做到

import _ from 'lodash';

因为它并没有为您带来整个图书馆。

Answer 3

最好使用第一种方式。至少有一件事：Always write explicitly what you want to use。这是所有框架/语言的最佳实践。

如果你有一些树摇晃，一些未使用的模块将无法加载，一切都应该是好的（如@zerkms所说）。但它是在世界上最好的情况下，即使最好的树摇动也不完美，即使你不使用它们，你仍然可以导入一些导入。如果您的项目是“小”，那应该没问题。如果你在项目中加载了数百种东西，那可能会有所不同。

当你构建你的项目时，你也会浪费时间进行树木抖动分析。

因为你不想“通过写两个单词来节省时间”，你会在每次构建上浪费时间并且可能会对性能产生影响

为什么不在ES6中使用import all

3 个答案: