【问题标题】：Webpack imports unneeded modules from nested dependenciesWebpack 从嵌套依赖项中导入不需要的模块
【发布时间】：2017-12-01 04:25:58
【问题描述】：
我正在创建一个 React 应用程序，我的主要依赖项是 React、react-dom、Redux、Immutable 和其他一些小型库。
问题是，当我使用webpack 构建应用程序时，它会加载一些额外的模块，例如lodash 和jQuery，因为它们是嵌套依赖项，这导致我的构建太大（检查WebpackBundleSizeAnalyzerPlugin )。
但是，例如，如果我只使用 react-dom 中的 render 函数，为什么我需要额外加载完整的 lodash 模块？
是否可以强制 webpack 只加载嵌套依赖模块的必要部分而不是完整的？
谢谢
【问题讨论】：
标签：
javascript
jquery
reactjs
webpack
lodash
【解决方案1】：
听起来您正在使用 webpack 1，它不包含您想要的功能：摇树。
Webpack 2 具有 tree-shaking，即实时代码导入。这意味着它只是捆绑了您在应用程序中实际使用的代码和库的片段，这比简单的死代码消除（首先捆绑然后删除未使用的代码）要好得多。
我过去遇到过这种情况，考虑迁移到 webpack 2，你会得到这个很棒的功能。我的捆绑包从 30Mb 变为 1Mb。缩小后，其中一款应用的大小降至 800k。
如果您不想使用 webpack 2，无论出于何种原因，还有其他选择，例如 rollup。我已经成功地使用了这两种方法。 Rollup 的配置要简单得多，但 webpack 2 仍然是我最喜欢的，因为它在查看资产时的增量构建比 rollup 的 watcher 更有效（更快）。生成的两个包的大小与 rollup 和 webpack 2 大致相同。
有用的链接：
Webpack 2 tree shaking
Migrating from webpack 1 to 2