Docs: Which Package Manager should I use?

[jaredpalmer]

Add page in documentation about yarn vs. yarn 2+ vs. pnpm vs. npm. Compare features:

Dimensions

• Support for resolutions/overrides, hoisting
• Workspace-aware installs
• Support for React Native
• Install speed comparison
• Support for turbo

[belgattitude]

Something interesting I found out about yarn 3 (2+ too I guess) is the local cache feature. It allows to keep the cache across yarn.lock changes, by pruning old packages and installing the new ones without invalidating the whole cache.

Example with a github action and restore_key (but the same apply locally or with docker/bildkit)

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"

      - name: Restore yarn cache
        uses: actions/cache@v2
        id: yarn-cache 
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: yarn-cache-folder-${{ hashFiles('**/yarn.lock', '.yarnrc.yml') }}
          restore-keys: |
            yarn-cache-folder-

When installing a new dependency, ie: superjson, there's no need to invalidate the whole thing.

yarn install --immutable
➤ YN0000: ┌ Fetch step
  ➤ YN0013: │ 1719 packages were already cached, one had to be fetched (superjson@npm:1.7.5)
➤ YN0000: └ Completed in 1s 124ms

Cache Size: ~127 MB (133261279 B)
Cache saved successfully

See also actions/setup-node#325

On Vercel, the following hack generally works YARN_CACHE_FOLDER=./.next/cache/yarn-cache yarn install

Worthy to share.

[jlarmstrongiv]

I tried pnpm before transitioning to npm workspaces, as prisma and next misbehaved with package hoisting