{G}eekrainian

Yarn vs NPM install speed comparison

3 min. read

Читать на Русском.

Programming

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.

Final thoughts

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).

Enjoyed the story? 🤔

If this article was useful for you, please consider supporting me by making a donation.

BuyMeACoffee

Ko-Fi

Share

You may also like

How to use PM2 with Node.js

Step-by-step guide for setting up PM2 for Node.js applications... Read more

© geekrainian.com

  • Русский
  • English
RSSSitemap