What are the differences between npm and Yarn and which one should you choose? - 面试题

npm and Yarn are two of the most popular JavaScript package managers, each with their own advantages and disadvantages. Understanding their differences and choosing the right tool is important for project development.

Basic Introduction

npm

Release Date: 2010
Developer: Isaac Z. Schlueter
Maintainer: npm, Inc. (now owned by GitHub)
Default Installation: Installed with Node.js

Yarn

Release Date: 2016
Developer: Facebook, Google, Exponent, and Tilde
Maintainer: Open Collective community
Installation: Requires separate installation

Core Differences

1. Installation Speed

npm:

Early versions installed dependencies serially
npm 7+ introduced parallel installation, significantly improving speed
Uses caching mechanism to speed up repeated installations

Yarn:

Supported parallel installation from the start
Usually faster than npm 6 and earlier versions
Comparable speed to npm 7+

bash
# npm install
npm install

# Yarn install
yarn install

2. Lock Files

npm:

Uses package-lock.json
Automatically generated by npm 5+
Records exact dependency versions and tree structure

Yarn:

Uses yarn.lock
Automatically generated
More detailed lock file format

Example:

json
// package-lock.json
{
  "name": "my-project",
  "lockfileVersion": 2,
  "packages": {
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-..."
    }
  }
}

yaml
# yarn.lock
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

lodash@^4.17.21:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#..."
  integrity sha512-...

3. Command Differences

Function	npm	Yarn
Install dependencies	`npm install`	`yarn install`
Add dependency	`npm install <pkg>`	`yarn add <pkg>`
Add dev dependency	`npm install <pkg> -D`	`yarn add <pkg> -D`
Global install	`npm install -g <pkg>`	`yarn global add <pkg>`
Update dependencies	`npm update`	`yarn upgrade`
Remove dependency	`npm uninstall <pkg>`	`yarn remove <pkg>`
Run script	`npm run <script>`	`yarn run <script>` or `yarn <script>`
View info	`npm info <pkg>`	`yarn info <pkg>`

4. Workspaces

npm:

Native workspace support in npm 7+
Simple configuration, integrated with package.json

json
{
  "name": "my-monorepo",
  "workspaces": [
    "packages/*"
  ]
}

Yarn:

Workspace support in Yarn 1+
More mature workspace functionality
Supports Yarn Plug'n'Play (PnP)

json
{
  "name": "my-monorepo",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ]
  }
}

5. Offline Mode

npm:

bash
npm install --offline
npm install --prefer-offline

Yarn:

bash
yarn install --offline
yarn install --prefer-offline

Yarn's offline mode is more mature with better cache management.

6. Output Format

npm:

More detailed output
Shows installation progress and warnings

Yarn:

More concise output
Uses emojis and colors
Better user experience

7. Security

npm:

npm audit built-in security audit
npm 8+ supports overrides for forced versions
Good integration with npm registry

Yarn:

yarn audit security audit
Supports resolutions for forced versions
Stricter dependency resolution

8. Plugins and Extensions

npm:

Relatively simple plugin system
Extend functionality through npm scripts

Yarn:

Rich plugin ecosystem
Supports Yarn 2+ plugin system
More flexible customization options

Performance Comparison

Installation Speed Tests

shell
Large project (1000+ dependencies):
- npm 6: ~120s
- npm 7+: ~60s
- Yarn 1: ~45s
- Yarn 2+: ~40s

Medium project (100-500 dependencies):
- npm 6: ~30s
- npm 7+: ~15s
- Yarn 1: ~12s
- Yarn 2+: ~10s

Disk Space

shell
node_modules size:
- npm: Standard nested structure
- Yarn 1: Standard nested structure
- Yarn 2+ (PnP): No node_modules, significantly reduced space

Selection Recommendations

Scenarios to Choose npm

New projects: npm 7+ performance is sufficient
Simple projects: No complex workspace features needed
Team familiarity: Team already familiar with npm
CI/CD: Most CI environments support npm by default
Publishing packages: npm publishing process is simpler

Scenarios to Choose Yarn

Large monorepos: Yarn workspaces are more mature
Need offline support: Yarn offline mode is better
Performance sensitive: Yarn is usually faster
Need PnP: Yarn 2+ Plug'n'Play functionality
Team preference: Team prefers Yarn's user experience

Migration Guide

Migrating from npm to Yarn

bash
# Install Yarn
npm install -g yarn

# Run in project directory
yarn install

# Yarn will automatically read package.json and generate yarn.lock

Migrating from Yarn to npm

bash
# Delete yarn.lock
rm yarn.lock

# Run npm install
npm install

# npm will generate package-lock.json

Advanced Feature Comparison

1. Dependency Resolution Strategy

npm:

Nested dependency structure
npm 7+ uses smarter resolution algorithm
Supports dependency hoisting

Yarn:

Stricter dependency resolution
Yarn 2+ supports zero-install (PnP)
Better dependency deduplication

2. Cache Mechanism

npm:

bash
npm cache verify
npm cache clean --force

Yarn:

bash
yarn cache list
yarn cache clean

Yarn's cache management is more refined.

3. Version Management

npm:

bash
npm version major
npm version minor
npm version patch

Yarn:

bash
yarn version --major
yarn version --minor
yarn version --patch

4. Global Package Management

npm:

bash
npm list -g --depth=0
npm uninstall -g <pkg>

Yarn:

bash
yarn global list
yarn global remove <pkg>

Configuration Files

.npmrc

ini
# npm configuration
registry=https://registry.npmjs.org
cache=/path/to/cache
strict-ssl=true

.yarnrc.yml

yaml
# Yarn 2+ configuration
nodeLinker: node-modules
enableGlobalCache: true
npmRegistryServer: "https://registry.npmjs.org"

Best Practices

1. Lock File Management

Always commit lock files to version control
Don't manually edit lock files
Regularly update dependencies

2. Version Ranges

json
{
  "dependencies": {
    // Use exact versions for production
    "critical-package": "1.2.3",
    
    // Can use range versions for development
    "dev-package": "^1.2.3"
  }
}

3. Security Audit

bash
# npm
npm audit
npm audit fix

# Yarn
yarn audit
yarn audit --json

4. CI/CD Optimization

yaml
# GitHub Actions - npm
- name: Setup Node.js
  uses: actions/setup-node@v3
  with:
    node-version: '18'
    cache: 'npm'

# GitHub Actions - Yarn
- name: Setup Node.js
  uses: actions/setup-node@v3
  with:
    node-version: '18'
    cache: 'yarn'

Future Trends

npm: Continuously improving performance and security
Yarn: Promoting PnP and zero-install concepts
pnpm: Emerging package manager using hard links to save space
Bun: Next-generation JavaScript runtime with built-in package manager

Choosing between npm and Yarn mainly depends on project requirements, team preferences, and specific scenarios. Both are excellent package managers with their own advantages.