Search code examples
node.jstypescriptnpmnode-modulesfilesize

How does the unpacked size affect the minified size of an npm pckage?


I'm currently trying to reduce the bundle size of an npm-package I have created. And I managed to get to an unpacked size of about 210kb.

https://www.npmjs.com/package/@agile-ts/core/v/0.0.12 <- 210kb

https://www.npmjs.com/package/@agile-ts/core/v/0.0.11 <- 304kb (with comments)

One change I made was to remove all the comments with help of the 'tsconfig' file, which reduced my unpacked size about 100kb BUT the minified size stayed the same (57kb)?

https://bundlephobia.com/result?p=@agile-ts/core@0.0.12 <- 57kB

https://bundlephobia.com/result?p=@agile-ts/core@0.0.11 <- 57kB (with comments)

So I was wondering how the unpacked size does affect the minified size. Are in the minified size comments already removed? I found no answer to this question on the internet.

Another package I found has an unpacked size of about 325kb

https://www.npmjs.com/package/@hookstate/core <- 325kb

but a minified size of 16.7kB.

https://bundlephobia.com/result?p=@hookstate/core@3.0.6 <- 16.7kb

-> It is about 30% larger in the unpacked size but 70% smaller in the minified size?

The only difference I found, is that the package I just mention consists out of 10 files and my package consists out of 66 files. So it's smaller than my package.. but then it should be smaller in the unpacked size too.

In case you have any idea how to reduce the package size.. feel free to contribute ^^ or to give me some advice https://github.com/agile-ts/agile/issues/106

Thank you ;D


Solution

  • What should matter is NOT how much the package contains on disk, but how much it takes space in a final application after all the bundling and minification is applied. This process includes variable names renaming, removal of comments, tree shaking and removal of unused/unreferenced code. There are tools which allow to inspect final application size and size of dependencies. They are different depending on what bundler you use.

    It is very bad idea to remove comments from source code for the purpose of minifying your package download size. As well as to remove other development supportive files like Typescript definitions, etc.