Redux + React 理解 webpack 包的大小答案

【问题标题】：Redux + React understanding size of webpack bundleRedux + React 理解 webpack 包的大小
【发布时间】：2016-08-16 10:16:00
【问题描述】：

我阅读了各种答案，例如 this 关于减小捆绑包大小。首先，我想了解我的 13MB 捆绑包发生了什么，所以我安装了Webpack Bundle Size Analyzer。它生成了这个输出：

有几点我不明白：

为什么 react 会以两种不同的大小出现两次？
怎么加起来不是13MB？（大约 4.75MB）
这是否意味着我自己的代码只有 4KB？（最后一行）
是否可以从这棵树中了解如何保存 KB？我的意思是，例如，有没有办法只使用 lodash 的一部分，或者 React 是否需要它作为一个整体？

更新： 找到#1 的答案。 React-color 需要 ReactCSS，这需要不同版本的 react 和 lodash。如果没有 React-color，我的包从 13MB 下降到了 8MB。我会尝试找到一种方法来重用 react 和 lodash。

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

您的 webpack 配置文件中似乎有 eval-source-map devtool 选项，这就是为什么您会获得如此巨大的包大小。这样，sourcemaps 就放在了 bundle js 文件中。

尝试将此选项更改为source-map 以单独构建源映射。

// webpack.config.js
{
  devtool: 'source-map',
  // ... other options
}

【讨论】：

【解决方案2】：

1) 有时其他依赖项再次需要 lodash 和/或 react，因此这些依赖项被 webpack 多次拉入（通常在版本不同时发生），这里 DedupePlugin 应该会有所帮助。最终的包大小还取决于您在 webpack 中的 devtool 条目，因此在开发中它通常要大得多，因为您可能启用了源映射并且您的构建没有优化。没有你的实际 webpack 配置很难说。

2) 也许 webpack 已经在进行重复数据删除了？

3) 最后一行是 400KB

4) 你绝对可以节省几个 kbs。一个好的开始方法是使用 lodash-webpack-plugin 和 babel-plugin-lodash，这将只导入您实际使用的 lodash 方法，而不是完整的库。您也可以只需要来自material-ui 的位，如this answer 中所述。我最近在我的 webpack 配置中添加了 webpack-dashboard，所以我可以立即看到构成我的包大小的输出和百分比，所以如果你真的不需要它们，也许你会三思而后行。

【讨论】：