lodash和lodash-es引入后，打包体积对比

在一个简单的js文件里面，没有安装lodash之前他的11.23KB， 安装lodash以后打包变成了542.79KB

加入lodash以后的代码

import _ from 'lodash'   /*引入全部*/
import { defaultsDeep } from 'lodash'; /**按需引入*/
import join from "lodash/join"; //按需引入

打包后

一看就是他把所有的lodash都引进来了，真的很可怕。修改导入写法：

打包体积会从542.79KB变化成20.39KB：

分析包的体积大小用工具：webpack-bundle-analyzer

直接在webpack里面配置，然后执行命令就好了

  "analyze": "webpack --mode production --profile --json > stats.json && webpack-bundle-analyzer stats.json"

你有没有发现，上面这个文件的package.json里面没有配置 "type": "module",所以直接使用import join from "lodash/join";没有问题，但是呢，你在package.json里面加上 "type": "module",结果成了这样：

为啥因为lodash.js模块打出来的包是commonjs的，你要想在esmodule里面使用，就要换成lodash-es。

 npm uninstall lodash
 npm install lodash-es -S

测试

import _ from 'lodash-es';/*引入全部*/
import { defaultsDeep } from 'lodash-es'; /**按需引入*/

lodash-es的按需引入不可以这样

结果只有9.48个KB

用lodash-es打出来的包更小，应该是lodash-es并没有直接将lodash打ESmodule包这么简单，它应该是优化了内部的内容，有兴趣，可以对比lodash和lodash-es的包看看。