为什么所有 lodash 都在我的 webpack 构建中结束？答案

【问题标题】：Why is all of lodash ending up in my webpack build?为什么所有 lodash 都在我的 webpack 构建中结束？
【发布时间】：2017-03-12 19:06:12
【问题描述】：

我检查了所有包含它的库，它们都通过完整路径包含函数，即：import find from 'lodash/find'。

Redux 是使用它的主要依赖项，我也检查了他们的代码，它通过完整路径正确导入每个函数。

这是我的 webpack 构建可视化的 json 输出：

如你所见，lodash 占据了很大的比例，而它的一些方法只被使用了。使用webpack-bundle-size-analyzer lodash 的大小为 135kb（当然是经过压缩和压缩的），但它仍然比应有的大很多。

有其他人经历过吗？我觉得它在某种程度上是redux。

更新：我发现一个包使用点语法导入 lodash 函数：import find from 'lodash.find'。也许这样做。点语法和全路径语法有什么区别？

【问题讨论】：

【解决方案1】：

使用babel-plugin-lodash 将所有lodash 方法（如import { map } from 'lodash';）的导入转换为对import _map from 'lodash/map'; 的直接引用：

{
  "plugins": ["lodash"],
  "presets": ["es2015"]
}

将它与lodash-webpack-plugin 结合使用，只包含您需要的功能：

plugins: [
     new LodashModuleReplacementPlugin({ 'collections': true })
]

【讨论】：