ES6导入重复？

Question

我试图保持我的代码(服务器端和客户端)尽可能模块化,这需要大量的导入和导出,但我有一个未解答的问题.

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

---

文件1

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()在应用程序中的多个位置添加一个模块(确保它不在函数或其他任何会推迟执行的模块中).您将看到日志只发生一次,而不是每次导入一次!

更新:值得注意的是,ES2015模块的规范有效地将此列为任何实现的要求:

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