的WebPack進口了不需要的模塊從嵌套的相關

Question

我創建一個應用程序做出反應，我的主要依賴關係React，react-dom，Redux，Immutable和其他一些小型圖書館。 問題是，當我使用webpack構建應用程序時，它會加載一些其他模塊，例如lodash和jQuery，因爲它們是嵌套的依賴關係，這會導致我的構建過大（使用WebpackBundleSizeAnalyzerPlugin進行檢查）。 但是，例如，如果我只使用函數react-dom，爲什麼我需要額外加載完整的lodash模塊？ 是否有可能強制webpack只加載嵌套依賴模塊的必要部分而不是完整的？ 謝謝

Answer 1

這聽起來你正在使用webpack 1，它不包括你想要的功能：樹抖動。

Webpack 2有抖動的樹，這是活代碼導入。這意味着它只是捆綁代碼和你在實際應用中使用的庫的各個部分，遠勝於普通的死代碼清除（先捆綁然後刪除未使用的代碼）。

我在過去遇到這個問題，考慮遷移到webpack 2，你會得到這個很棒的功能。我得到我的捆綁從30Mb到1Mb。隨着縮小，其中一個應用程序降到了800k。

如果您不想使用webpack 2，無論出於何種原因，還有其他替代方法，如rollup。我已經成功使用兩者。 Rollup的配置要簡單得多，但webpack 2仍然是我最喜歡的，因爲在觀看資產比彙總的觀察者更有效率（更快）時，它的增量構建。兩個得到的束具有約與彙總和的WebPack相同的尺寸2.

有用的鏈接：

Webpack 2 tree shaking

Migrating from webpack 1 to 2