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對作為參數，它必須返回相同的模塊記錄實例。