具有npm的Webpack：模塊動態導入

Question

我向使用npm和webpack的現有項目添加了一些可選功能。 此功能利用了一個相當大的模塊（確切地說是tfjs），我希望默認情況下阻止加載它，因為它大約使應用程序的有效負載增加了一倍。 理想情況下，我可以為導航到此功能的用戶動態導入它。

無論如何，我是第一個承認我完全不在這兒的人。 我對Webpack不太熟悉。 所以我的問題是：

動態加載npm模塊依賴項的一般策略是什么？

我看過代碼拆分-這似乎僅適用於源，而不適用於依賴項。 我正在考慮使用單獨的package.json和node_modules /創建一個子目錄，並將其導出為靜態資源。

Answer 1

代碼拆分實際上應該為您工作！ 它適用於源，但只會將每個源實際使用的依賴項捆綁在一起。 因此，如果僅確保僅在使用依賴項的頁面上導入依賴項並正確設置代碼拆分，則應該獲得上面描述的行為。 如果沒有有關您的項目結構的更多詳細信息，實際上不可能給出確切的webpack配置更詳細的答案（老實說，即使您確實提供了詳細信息，我也可能不會花時間為您進行設置），但是我認為通過代碼拆分，您將走上正確的道路。

Answer 2

是的，正如schu34所說，您絕對是在正確的軌道上。

通常，設置基本上是：

1）確保庫已經通過另一個模塊或腳本標記加載到您的頁面上。 它應該暴露在window對象上。 例如，jQuery在大多數站點上都同時window.$為window.$和window.jquery ，並且都可以使用。

2）將庫安裝為開發依賴項

3）在Webpack中，將庫配置為外部庫。 這將允許您將lib導入源中，而無需在輸出中包括它。 請參閱： Webpack外部

4）如果使用Flow，這可能會有些棘手。 在這種情況下，由於我很懶，我傾向於只創建一個const（ const $ = window.$ ），但是有更好的解決方案可用。

我希望這有幫助。