My understanding of packages is that we are reusing a piece of code written by someone else, that being said when I download some 10 odd NPM packages for my project it takes a long time while when these packages are downloaded by browser on client machine, its really quick (adding the time taken for rendering etc.) How? Am I missing something here?
When you import a npm package to your project, you are not just downloading the package itself, but all the libraries the package needs individually, which can be many. Plus you get the uncompressed source of the libraries which adds to the time, sometimes you might even have READMEs and stuff like that that get downloaded too.
When you instead use a npm package in your website, you download a "compiled" version of the package. The package itself and all the libraries it needs are already in a single file. Everything that is not needed to run (for example README) is stripped out. To further reduce the file size, the file is minified.