Yarn vs NPM install speed comparison

12 Jun 2019·2 min. read·

Comparing the installation speed of Yarn and NPM packages across several projects of varying sizes.

Configuration

NodeJS 14.21.3 (x64)
NPM 6.14.18
Yarn 1.22.19
Internet speed 320Mbps

NextJS Project

package.json:

{
  "dependencies": {
    "@mdx-js/loader": "^1.5.9",
    "@mdx-js/runtime": "^1.6.1",
    "@next/mdx": "^9.3.6",
    "@zeit/next-css": "^1.0.1",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "gray-matter": "^4.0.2",
    "i18next": "^19.4.3",
    "i18next-http-middleware": "^1.0.0",
    "isomorphic-unfetch": "^3.0.0",
    "next": "9.1.6",
    "next-i18next": "^4.3.0",
    "next-images": "^1.4.0",
    "next-seo": "^4.4.0",
    "raw-loader": "^4.0.1",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-icons": "^3.10.0",
    "react-markdown": "^4.3.1",
    "reflexbox": "^4.0.6",
    "remark-emoji": "^2.1.0",
    "remark-images": "^2.0.0",
    "stringify-object": "^3.3.0",
    "styled-components": "^4.4.1"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.10.7"
  }
}

NPM (NextJS Project)

added 1218 packages from 537 contributors and audited 1220 packages in 25.155s

Yarn (NextJS Project)

Done in 23.62s.

Gatsby Project

package.json:

"dependencies": {
  "@fontsource/roboto": "^4.3.0",
  "@material-ui/core": "^4.12.1",
  "@material-ui/icons": "^4.11.2",
  "@material-ui/lab": "^4.0.0-alpha.60",
  "@mdx-js/mdx": "^1.6.22",
  "@mdx-js/react": "^1.6.22",
  "@svgr/webpack": "^5.5.0",
  "copy-to-clipboard": "^3.3.1",
  "gatsby": "^3.3.1",
  "gatsby-plugin-image": "^1.2.1",
  "gatsby-plugin-intl": "^0.3.3",
  "gatsby-plugin-manifest": "^3.2.0",
  "gatsby-plugin-mdx": "^2.5.1",
  "gatsby-plugin-mdx-frontmatter": "^0.0.4",
  "gatsby-plugin-react-helmet": "^4.2.0",
  "gatsby-plugin-remove-generator": "^1.1.0",
  "gatsby-plugin-sharp": "^3.5.0",
  "gatsby-plugin-svgr": "^3.0.0-beta.0",
  "gatsby-remark-images": "^5.2.1",
  "gatsby-source-filesystem": "^3.2.0",
  "gatsby-transformer-sharp": "^3.2.0",
  "lodash": "^4.17.21",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-helmet": "^6.1.0",
  "react-icons": "^4.2.0",
  "react-query": "^3.18.1",
  "react-use": "^17.2.4",
  "styled-components": "^5.3.0",
  "svg-country-flags": "^1.2.10",
  "tinycolor2": "^1.4.2"
},
"devDependencies": {
  "@types/mdx-js__react": "^1.5.3",
  "@types/react": "^17.0.3",
  "@types/react-dom": "^17.0.3",
  "@types/react-helmet": "^6.1.1",
  "@types/styled-components": "^5.1.9",
  "@types/tinycolor": "^1.1.27",
  "@typescript-eslint/eslint-plugin": "^4.22.0",
  "@typescript-eslint/parser": "^4.22.0",
  "eslint": "^7.25.0",
  "eslint-config-airbnb-typescript": "^12.3.1",
  "eslint-config-prettier": "^8.3.0",
  "eslint-plugin-import": "^2.22.1",
  "eslint-plugin-jsx-a11y": "^6.4.1",
  "eslint-plugin-prettier": "^3.4.0",
  "eslint-plugin-react": "^7.23.2",
  "eslint-plugin-react-hooks": "^4.2.0",
  "gatsby-plugin-typescript": "^3.3.0",
  "prettier": "2.2.1",
  "rimraf": "^3.0.2",
  "typescript": "^4.2.4"
}

NPM (Gatsby Project)

added 2085 packages from 1137 contributors and audited 2097 packages in 103.539s

Yarn (Gatsby Project)

Done in 80.63s.

As we can see, the package installation speed for these versions of Yarn and NPM remains approximately the same for small projects (25.15s NPM vs 23.62s Yarn), but it starts to increase significantly for NPM as the number of packages grows (103.53s NPM vs 80.63s Yarn).

Appendix: In the case of a medium-sized commercial project written in AngularJS, the speed advantage was more noticeable (4m 15s for NPM vs 2m 3s for Yarn).

Yarn NPM