Question

我试图将我的代码（服务器端和客户端）尽可能地保持模块化，这需要大量的导入和导出，但是我有一个未解决的问题。

我试图从这里搜索，我阅读了热门的博客文章，甚至看了几个YT视频，但它还没有完全解释。我希望现在避免犯这个错误，避免以后重写我的逻辑。

File1中

import React from 'react';

// do something

文件2

import React from 'react';

// do something else

文件3

import File1 from './file1';
import File2 from './file2';

// do something with both

足够聪明吗？我可以导入相同的模块尽可能多，只导入一次？
如果我还需要import React File3 怎么办？是否仍然足够聪明来处理这种情况？

我正在使用Node，Babel和Webpack。

Answer 1

当您通过Node导入模块时（通过扩展，Webpack，因为它在模块解析时有效遵循相同的规则），文件中的代码执行一次，然后缓存生成的导出。这意味着在您的两个文件中，React将是对同一对象的引用。所以你的假设是正确的 - Webpack确实非常聪明，每次导入时都不会执行React的完整源代码文件。

您可以非常轻松地为自己测试 - 将console.log()添加到在应用程序中的多个位置导入的模块中（确保它不在函数或其他任何会推迟执行的模块中）。你会看到日志只发生一次，而不是每次导入一次！

更新：值得注意的是the spec for ES2015 modules有效地将此列为任何实施的要求：

如果正常完成，此操作必须是幂等的。每次使用特定referencingModule, specifier对作为参数调用它时，它必须返回相同的Module Record实例。

ES6导入重复？

1 个答案: