活用yarn resolutions统一版本大幅减小产物包体积（优化之最后的倔强）

2024-06-30 13:39| 来源: 网络整理| 查看: 265

问题

假如一个依赖 A 依赖了 B 的 v1.0 版本，而你的主项目中依赖了 B 的 v1.1 版本，会怎么样？

两者的包都会被打进项目之中！

当依赖版本可以灵活调整时，比如依赖的版本号是 ^ 开头的，两者都使用最新版本是可以互相兼容的，而现在更多的第三方依赖都会定死他所依赖的库的版本号以稳定功能，确保不会产生第三方依赖做出了 BREAKING CHANGE 而导致大面积的报错停用。

解决

如何解决这个问题，我们只需要只用 yarn 提供的 resolutions 字段统一所有依赖和依赖的依赖…他们的版本号即可。

比如要统一所有 lodash 版本号为 4.17.20 ，在 package.json 中加入：

{ "name": "project-name", "dependencies": { "lodash": "^4.17.20" }, "resolutions": { "lodash": "4.17.20" } }

此时如果你的第三方依赖他们依赖了什么版本的 lodash ，最终你只会安装并使用 4.17.20 这个版本的 lodash 。

实例

先来看一个版本不一致带来的例子：

第三方库依赖了 [email protected]

假如我们主项目依赖了一个叫 test 的库，他的 package.json 如下：

{ "name": "test", "version": "1.0.0", "dependencies": { "lodash": "4.16" } }

主文件 index.js 如下：

export { isArray } from 'lodash'

也就是说，该 test 库从 4.16 版本的 lodash 中转而倒出了一个 isArray 方法，当然在此库中使用不倒出也同理。

主项目依赖了 lodash@^4.17.20

来看我们的主项目 package.json ：

{ "name": "main-project", "scripts": { "build": "webpack --mode production" }, "devDependencies": { "webpack": "^5.14.0", "webpack-cli": "^4.3.1" } "dependencies": { "lodash": "^4.17.20" } }

主项目就是通过 yarn add lodash 这种常规手段安装了最新的 lodash 。

在主项目中我们依次使用不同版本的 lodash ：

// 主项目的 index.js import { isArray } from 'test' import { isArray as isArrayNew } from 'lodash' const arr = [] isArray(arr) isArrayNew(arr)

我们执行 yarn build 打包得到：

足足有 137 kb ，现在我们使用 resolutions 字段指明只需要 4.17.20 版本的 lodash ：

{ "name": "main-project", "scripts": { "build": "webpack --mode production" }, "devDependencies": { "webpack": "^5.14.0", "webpack-cli": "^4.3.1" } "dependencies": { "lodash": "^4.17.20" }, "resolutions": { "lodash": "4.17.20" } }

重装依赖并构建：

# 重新安装依赖 yarn # 构建项目 yarn build

得到结果：

少了几乎一半，可见版本管理的重要性！

总结

使用 resolutions 统一版本字段可以得到极大的收益，减少几百 kb 产物轻而易举。

但也要思考以下两个问题：

到底哪些依赖需要指定版本号。因为所有依赖视图都会收集到主项目的 yarn.lock 中，所以可以搜索查看哪些比较大的库（ webpack-bundle-analyzer 可视化分析得到哪些库比较大）需要指定版本（或者自己手写 yarn.lock 的依赖分析脚本），在 yarn.lock 中，可以看到某一个依赖到底装了几个版本。

是否敢指定版本号。因为跨大版本可能有 BREAKING CHANGE 的风险，不建议当有大版本差距时指定版本号，当小版本有区别时，可以指定以获得收益。

【本文地址】

公司简介

联系我们