使用 ES6 导入加载特定名称是否比导入命名空间更快? [英] Is using an ES6 import to load specific names faster than importing a namespace?

问题描述

我发现至少有两种方法可以从 Ramda 等模块中导入函数.可能还有更多的方法可以做一些非常相似的事情，比如 const R = require('ramda');

I've found at least two ways to import functions in from a module like Ramda for example. There are probably a few more ways to do something very similar like const R = require('ramda');

选项 1 是导入某些函数:

Option 1 is to import certain functions:

import { cond, T, always, curry, compose } from 'ramda';

选项 2 是导入整个模块，如:

Option 2 is to import the whole module like:

import * as R from "ramda";

我更愿意像这样引用调用函数的模块:

I would prefer to reference the module from which the function is being called like so:

R.T();

但是如果使用第二个选项，它是否会引入每个 Ramda 函数，而不仅仅是我正在使用的模块中使用的函数?如果使用选项 2，就发送到浏览器的内容而言，是否对实际内存使用或带宽使用有任何影响?是否有可能以某种方式执行此操作:

But if the 2nd option is used, does it bring in every Ramda function not just the ones used in a module I'm working in? Are there any impacts on actual memory use, or bandwidth use as far as what gets sent to the browser if option 2 is used? Is it possible to somehow do this:

// invalid syntax below:
import R { cond, T, always, curry, compose } from 'ramda';
R.T();

我的问题与这个有点相关，但有点不同将 R (ramda) 导入 typescript .ts 文件

My question is kinda related to this one, but it's a bit different import R (ramda) into typescript .ts file

推荐答案

TL;DR:没关系.

import * as … from 'ramda';
import { … } from 'ramda';

将两者默认总是引入完整的 Ramda 模块及其所有依赖项.模块内的所有代码都将运行，使用哪种语法来引用导出的绑定并不重要.使用命名导入还是命名空间导入完全取决于偏好.

will both by default always bring in the complete Ramda module with all its dependencies. All code inside the module would be run, and which syntax was used to reference the exported bindings doesn't matter. Whether you use named or namespaced imports comes down to preference entirely.

可以减少下载文件大小和使用内存的是静态分析.在评估模块后，引擎可以垃圾收集那些从无处引用的绑定.模块命名空间对象可能会使这稍微困难一些，因为任何有权访问该对象的人都可以访问所有导出.但是这些对象仍然以某种方式(作为不可变的)指定，以允许对其使用情况进行静态分析，如果您对它们做的唯一事情是使用常量名称访问属性，引擎应该利用这一事实.

What can reduce the file size to download and the used memory is static analysis. After having evaluated the module, the engine can garbage-collect those bindings that are referenced from nowhere. Module namespace objects might make this slightly harder, as anyone with access to the object can access all exports. But still those objects are specified in a way (as immutable) to allow static analysis on their usage and if the only thing you're doing with them is property access with constant names, engines are expected to utilise this fact.

任何大小优化都涉及猜测模块的哪些部分需要评估，哪些不需要，并且发生在您的模块打包器中(例如 汇总 或 WebPack).这被称为 Tree Shaking，在不需要时删除部分代码和整个依赖项(被导入的任何东西使用).无论导入样式如何，它都应该能够检测您正在使用哪些导入，尽管在对命名空间对象执行异常操作(例如循环它或使用动态属性访问)时，它可能不得不退出.

Any size optimisation involves guessing which parts of the module need to be evaluated and which not, and happens in your module bundler (like Rollup or WebPack). This is known as Tree Shaking, dropping parts of the code and entire dependencies when not needed (used by anything that got imported). It should be able to detect which imports you are using regardless of the import style, although it might have to bail out when are doing unusual things with the namespace object (like looping it or using dynamic property access).

要了解您的打包程序可以做出的准确猜测，请联系其文档.

To learn about the exact guesses your bundler can make, contact its documentation.

这篇关于使用 ES6 导入加载特定名称是否比导入命名空间更快?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！