Comparing the installation speed of Yarn and NPM packages across several projects of varying sizes.
- NodeJS 14.21.3 (x64)
- NPM 6.14.18
- Yarn 1.22.19
- Internet speed 320Mbps
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"
}
}
added 1218 packages from 537 contributors and audited 1220 packages in 25.155s
Done in 23.62s.
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"
}
added 2085 packages from 1137 contributors and audited 2097 packages in 103.539s
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).
Enjoyed the story? 🤔
If this article was useful for you, please consider supporting me by making a donation.
You may also like
Step-by-step guide for setting up PM2 for Node.js applications... Read more
Several ways to get the link to a GIT repository from the directory where the repository was previously cloned... Read more
Step-by-step guide on setting up webhooks to send real time updates from GitHub to Discord... Read more