minimize lodash bundling

lodash 是一个经常使用的数据处理工具库。它使用起来很便利，但是也有个小问题，就是lodash本身挺大的(未压缩下有1MB左右大小)。由于通常我们只会使用到lodah中的一部分函数，而并非是全部。将整个lodash都打包到工程中有点亏本。所以一个自然的想法就是：可不可以只把我们需要的部分进行打包，舍弃未使用的部分。
下面介绍几种方法来实现这个想法。

1. lodash-es + Webpack Tree Shake

webpack 4中实现的Tree Shake是一个很强力的功能，它可以通过分析代码来将没使用的代码（Dead code）从bundle中移除，以此来减小bundle的大小。这里有一个前提条件：所使用的库是使用ES6 的模块系统实现的，因为只有静态库才能进行Tree Shake。所以这里不能使用lodash，而需要使用lodash-es，因为lodash是基于CommonJS的，无法进行静态文件分析，也就无法进行Tree Shake。lodash-es是基于esm的。
步骤一：安装lodash-es

npm install --save lodash-es

步骤二：配置Webpack配置
Tree Shake只有在webpack 的production环境下才会生效，同时需要设置optimization.usedExports=true(default as true)。
webpack.config.js

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true
  }
  ...
}

举例
在代码中只引入了join函数。在运行npx webpack编译之后，使用webpack-bundle-analyzer观看打包文件就会看到下图，因为我们只引入了join函数。

image.png

2. lodash + direct importing

如果你想要使用lodash库也可以，那么就需要直接导入你想要使用的函数了，例如：

import { join } from `lodash/join`;

这种直接从指定的文件中导入函数，所以不需要配置Webpack。因为你声明了只想导入lodash/join.js这个文件，而不是整个lodash文件。看到的bundle分析和上图一样。

3.安装特定的lodash subset

如果你只需要特定的lodash功能，比如需要debounce，你可以只安装

npm i --save lodash.debounce

其他的例子可以到这里查看。

总结

方法2&3并没有使用Webpack Tree Shake的特性，只是直接导入文件来避免未使用代码的引入。方法1才是真正依赖webpack进行代码分析，从而只将需要的代码进行打包。