Within your package.json, you will find the sections for dependencies and devDependencies.
{
"devDependencies": {
"webpack": "^4.42.1"
},
"dependencies": {
"react": "^16.13.1"
}
}
The purpose behind this division is clear:
dependenciesare necessary for the application to functiondevDependenciesare only required during development
But why separate them? What advantages does it offer?
What if you include all dependencies under dependencies like this?
{
"dependencies": {
"react": "^16.13.1",
"webpack": "^4.42.1"
}
}
Will there be any performance implications? Is splitting dependencies primarily important when planning to publish a module?
This question isn't about: What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?
That particular question delves into defining what dependencies and devDependencies entail, which has already been clarified earlier.
This inquiry focuses on the reason behind segregating dependencies in this manner. Some individuals build their applications directly on the production server, while others, like myself, prefer offline builds before deploying just the index.html and main.js artifacts. As such, certain considerations may not apply in my case.
Furthermore, upon further examination, it appears that devDependencies may not contribute to the size of the main.js bundle as expected, at least within my project setup. I noticed no discernible size discrepancy whether I split the dependencies or kept them all under dependencies. Since I solely ship the final build artifact, this distinction doesn't impact my production workflow.