npm update/dedupe更新依赖

当安装依赖的时候，由于时间差异，可能会安装上同一依赖的不同版本，导致一个npm包存在多个版本。如：

1. 三月之前，我们安装了A包，它依赖于postcss@^8.4.10
2. 现在，我们安装了一个B包，它依赖于postcss@^8.4.28

如果在同一时间安装，则只会装一个 postcss@8.4.39 (假如现在8.4.39是最新版)。但是如果安装时间不同的话

1. A 依赖于postcss@^8.4.10，三个月前 装包，安装 postcss@8.4.10，因为当时最新版本是8.4.10,并写入 lockfile
2. B 依赖于 postcss@^8.4.28，现在安装最新版本，安装postcss@8.4.29，并写入lockfile

此时就会出现两个版本的 postcss，将会导致一系列问题：

1. 安装体积变大
2. postcss 中的编译流程将要重复跑两次，而编译是极其耗时的
3. 如果重复版本为 react/lodash 等页面依赖内容，则会增加打包体积

npm update

npm update 将会使 package.json/package-lock.json 中的依赖升级到符合其版本号范围的最新版本。

当我们使用npm update升级后，只会出现了一个依赖postcss@8.4.39

具体package-lock.jsondiff差异如下

www.diffchecker.com/IhHkjSSH/

但是package.json中的信息并没有同步更新，要想将新的版本号重新写入package.json中，需要npm update --save，这样依赖才会都更新成8.4.39

// package.json

"dependencies": {
  "postcss": "^8.4.39"
}

如此，便可以通过 npm update 减少重复依赖安装，提升安装速度，以及减小包体积。

pnpm update

pnpm update 与 npm 不同的是，它将把 package.json 中的依赖升级至符合该版本号范围的最新版本，并重新写入 package.json。效果类似于 npm update --save

npm dedupe

虽然 npm update 可以解决大部分依赖安装问题，但仍然有一部分问题。比如：

1. postcss 最新版本为 postcss@8.4.39
2. A 依赖于 postcss@^8.4.10，三个月前装包，安装 postcss@8.4.10，并写入 lockfile
3. B 依赖于 postcss@8.4.28，三个月后装包，安装 postcss@8.4.28，并写入 lockfile

此时，即便使用 npm update 进行升级，仍然会出现两个 npm 包的情况

• A 依赖于 postcss@^8.4.10，依赖升级后为 postcss@8.4.39
• B 依赖于 postcss@8.4.28，依赖升级后为 postcss@8.4.28

此时，可以使用 npm dedupe 将二者均升级为符合二者 npm 包范围的共同版本的 postcss@8.4.28。

具体diff信息如下：

www.diffchecker.com/T22XN4KU/

npm install/pnpm install

如以上依赖，postcss@^8.4.10 与 postcss@8.4.28 在同一时间安装会如何呢？

• npm install 将会下载符合 npm 包依赖的最新版本号，此时会存在两个 postcss，需要手动 npm dedupe
• pnpm install 可理解为自带 pnpm dedupe 过程，只会存在一个 postcss

下面是pnpm-lock.yaml文件，可以发现只有8.4.28这一个版本的依赖

lockfileVersion: '6.0'

settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false

importers:

  .: {}

  packages/A:
    dependencies:
      postcss:
        specifier: ^8.4.10
        version: 8.4.28

  packages/B:
    dependencies:
      postcss:
        specifier: 8.4.28
        version: 8.4.28

packages:

  /nanoid@3.3.7:
    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true
    dev: false

  /picocolors@1.0.1:
    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
    dev: false

  /postcss@8.4.28:
    resolution: {integrity: sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==}
    engines: {node: ^10 || ^12 || >=14}
    dependencies:
      nanoid: 3.3.7
      picocolors: 1.0.1
      source-map-js: 1.2.0
    dev: false

  /source-map-js@1.2.0:
    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
    engines: {node: '>=0.10.0'}
    dev: false

参考链接

1. # npm update/dedupe
2. Demo链接如下，推荐自己尝试：github.com/chenwll/npm...