Redux React了解Web包包的大小

Question

我读过关于减少捆绑大小的各种回答。首先，我想了解我的13MB捆绑包是怎么回事，所以我安装了Webpack捆绑包大小分析器。它生成了以下输出：

有几件事我不明白：

1. 为什么react会以两种不同的尺寸出现两次？
2. 为什么加起来不到13MB？（大约4.75MB）
3. 这是否意味着我自己的代码只有4KB？（最后一行）
4. 从这棵树可以理解如何保存KBs吗？我的意思是，例如，有没有一种方法可以只使用部分lodash，还是React需要它作为一个整体

更新：找到了#1的答案。React color需要React CSS，它需要不同版本的React和lodash。没有颜色，我的包从13MB下降到8MB。我将设法找到一种方法来重复使用react和lodash。

Answer 1

1）有时其他的依赖关系需要再次提交和/或反应，所以这些依赖关系被webpack多次拉入（通常在版本不同时发生），这里的DedupePlugin应该有所帮助。最终的捆绑包大小也取决于webpack中的devool条目，因此在开发中，它通常要大得多，因为您可能启用了源地图，并且您的构建没有优化。很难告诉没有你的实际webpack配置。

2）也许webpack已经在deduping了？

3） 最后一行是400KB

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

Answer 2

看起来你的webpack配置文件中有一个evar-Source-mapdevool选项，这就是为什么你会得到如此巨大的bundle大小。这样，源地图就会放在bundle js文件中。

尝试将此选项更改为源地图，以单独构建源地图。

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