javascript - Webpack 从嵌套的依赖项中导入不需要的模块

Question

我正在创建一个 React 应用程序，我的主要依赖项是 React、react-dom、Redux、Immutable 和其他一些小型库。问题是，当我使用 webpack 构建应用程序时，它会加载一些额外的模块，例如 lodash 和 jQuery，因为它们是嵌套依赖项，这导致我的构建太大(使用 WebpackBundleSizeAnalyzerPlugin 检查)。但是，例如，如果我只使用 react-dom 中的 render 函数，为什么我需要额外加载完整的 lodash 模块？是否可以强制 webpack 只加载嵌套依赖模块的必要部分而不是完整的？谢谢

Answer 1

听起来您使用的 webpack 1 不包含您想要的功能:tree shaking。

Webpack 2 有 tree shaking，即实时代码导入。这意味着它只是捆绑了您在应用程序中实际使用的库的代码和片段，这比消除无用代码要好得多(先捆绑然后删除未使用的代码)。

我过去遇到过这个，考虑迁移到 webpack 2，你将获得这个很棒的功能。我的 bundle 从 30Mb 增加到 1Mb。通过缩小，其中一个应用程序的大小降至 800k。

如果您不想使用 webpack 2，无论出于何种原因，还有其他选择，例如 rollup .我已经成功地使用了两者。 Rollup 的配置要简单得多，但 webpack 2 仍然是我的最爱，因为它的增量构建在观看 Assets 时比 rollup 的观察者更有效(更快)。两个生成的包与 rollup 和 webpack 2 的大小大致相同。

有用的链接:

Webpack 2 tree shaking

Migrating from webpack 1 to 2