JavaScript中的Module Loader和Module Bundler有什麼區別？

Question

有人可以提供有關JavaScript中的模塊加載器和模塊捆綁器的一些信息嗎？

• 有什麼區別？
• 何時應該使用模塊加載程序以及何時使用模塊捆綁器？
• 爲什麼我們需要他們呢？

Answer 1

模塊加載器和捆綁器都使它更有可操作性來編寫模塊化的JavaScript應用程序。讓我給你的一些背景：

模塊裝載機

模塊加載器通常是一些庫，可以加載，解釋和執行您使用特定模塊格式/句法定義的JavaScript模塊，如AMD或CommonJS 。

當您編寫模塊化JavaScript應用程序時，通常最終每個模塊只有一個文件。因此，當編寫由數百個模塊組成的應用程序時，可能會非常痛苦地確保所有文件都包含在正確的順序中。所以基本上，加載器會爲你處理依賴關係管理，通過確保應用程序執行時加載所有模塊。查看一些流行的模塊加載器，如RequireJS和SystemJS以獲得想法。

模塊捆紮機

模塊捆紮機是到模塊裝載機的替代方案。基本上他們做同樣的事情（管理和加載相互依賴的模塊），但是將它作爲應用程序構建的一部分，而不是在運行時。因此，在執行代碼時，不會像加載依賴項那樣加載依賴項，而是在執行之前，捆綁器將所有模塊拼接成單個文件（一個包）。看看Webpack和Browserify作爲兩個受歡迎的選項。

什麼時候用什麼？

哪一個更好取決於您的應用程序的結構和大小。

捆綁器的主要優勢在於它使瀏覽器必須下載的文件少得多。這可以爲您的應用程序提供性能優勢，因爲它可以減少加載所需的時間。 但是，取決於您的應用程序所具有的模塊數量，並非總是如此。特別是對於大型應用程序，模塊加載器有時可以提供更好的性能，因爲加載一個巨大的單一文件也可能阻止在開始時啓動您的應用程序。所以這是你必須簡單地測試和發現的。

ES6/ES2015更新

需要注意的是2015年的ECMAScript（或ES6），用它自己的，本地實現的模塊。您可以快速獲得簡介here。