ES6導入重複？

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怎麼辦？它是否足夠聰明來處理這種情況？

我使用節點，巴別和Webpack。

Answer 1

當您通過節點（以及擴展，Webpack，因爲它在模塊解析時實際遵循相同的規則）導入模塊時，文件中的代碼被執行一次，然後緩存結果導出。這意味着在你的兩個文件中，React將是對同一個對象的引用。因此，您的假設是正確的 - Webpack確實足夠聰明，每次導入時都不會執行React的完整源代碼文件。

你可以很容易地測試這個 - 爲你的應用程序中的多個位置導入的模塊添加一個console.log()（確保它不在函數或任何其他推遲執行的模塊中）。你會看到日誌只發生一次，而不是每次導入一次！