lodash错误使用导致的体积问题

实际项目中看到lodash的导入使用存在问题，这里mark下。

问题

package.json中依赖是lodash即cjs lodash。

import _ from 'lodash';

import { cloneDeep } from 'lodash';

上述方式下，无路是哪个打包都是全量的。

优化

import cloneDeep from 'lodash/cloneDeep';

这种方式下是只导入cloneDeep。但该方式还是有坏处。

1. 如果多函数导入，那就需要多行import。
2. 导入的函数模块自身也是CJS导入其它模块，因此也会存在多余的代码。

更好的方式

lodash是有提供es模块的。因此我们可以直接换成lodash-es，如果不想改变原代码，可以使用包别名方式。

{
  "lodash": "npm:lodash-es@^4.17.21"
}

导入方法如下。

import { cloneDeep } from 'lodash-es';

注意，即使是ES模块下，也不要使用import _ from 'lodash-es'，该方式下会造成全量导入。

优化后的体积大小变化

实际测试优化导入写法后，体积会减少100KB左右。

优化前

优化后

写在最后

体积大小的根本问题，还是CJS是全量导入，ES可以利用打包工具做tree shaking。