javascript - 为什么所有的 lodash 最终都出现在我的 webpack 构建中？

Question

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

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

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

https://www.dropbox.com/s/njjjtgtw19d52j6/Screenshot%202016-10-30%2006.27.44.png?dl=0

如您所见，lodash 占据了很大的比例，而只有少数方法被使用。使用 webpack-bundle-size-analyzer lodash 的大小为 135kb(当然，经过预先缩小和 gzip 压缩)，但它仍然比应有的大很多。

有没有人遇到过这种情况？我觉得它有点像 redux。

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

Answer 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 })
]