Lodash

一个现代化的 JavaScript 工具库,提供模块化、高性能和额外功能。

按方法打包

Lodash 方法可以通过独立的 按方法打包 的方式使用,例如 lodash.mapvalueslodash.pickby 等。这些包只包含方法所依赖的代码。

但是,不鼓励使用这些包,并且它们 将在 v5 版本中被移除

尽管它们看起来更轻量级,但在依赖多个按方法打包和/或主 lodash 包的项目中,它们通常会增加 node_modules 和 webpack/rollup 打包的大小。主 lodash 包中的许多方法共享代码,而按方法打包则在内部捆绑了它们依赖的任何代码的副本。

例如,throttle 在内部使用 debounce。在使用主 lodash 包中两种方法的项目中,throttle 将导入与直接导入 debounce 的任何代码相同的 debounce 模块,因此只有一个 debounce 副本最终会出现在 webpack 包中。

另一方面,如果项目从 lodash.throttle 导入 throttle,则捆绑在 lodash.throttle 中的 debounce 代码的额外副本将最终出现在 webpack 包中,此外还有来自主 lodash 包或 lodash.debouncedebounce

但是 lodash 还不够轻量级!

别担心——如果您直接导入或 require 方法,例如 const throttle = require('lodash/throttle'),那么只有您的包使用的 lodash 代码子集才会被捆绑到使用您的包的项目中。

如果这种导入方式看起来很麻烦,您可以使用 babel-plugin-lodash 将命名的顶级导入(如 import { throttle, debounce } from 'lodash')转换为直接导入语句。

此外,像 webpack 和 rollup 这样的现代摇树打包器可以避免捆绑您不需要的代码,即使您不使用直接导入或 babel 插件。

迁移到主 lodash

可以使用 jscodeshift 转换 将按方法打包的导入转换为主 lodash 包的导入。