Reduce package bundle size

Question

Reduce package bundle size

bennoinbeta opened this issue 3 years ago · comments

Benno commented 3 years ago

https://bundlephobia.com/result?p=@agile-ts/core@0.0.11

very big bundle size..
about 50kb

Ways to resolve issue:

remove comments
outsource event functionality
outsource types (no idea how to do)

Benno · Answer 1 · Sun Feb 28 2021 17:48:36 GMT+0800 (China Standard Time)

With comments: (agile.js)

npm notice
npm notice package: @agile-ts/core@0.0.11
npm notice === Tarball Contents ===
npm notice 6.3kB dist/agile.js <-- here
npm notice 794B dist/runtime/subscription/container/CallbackSubscriptionContainer.js
npm notice 14.7kB dist/collection/collection.persistent.js
npm notice 762B dist/runtime/subscription/container/ComponentSubscriptionContainer.js
npm notice 1.8kB dist/computed/computed.tracker.js
npm notice 576B dist/event/event.job.js
npm notice 1.1kB dist/event/event.observer.js
npm notice 9.6kB dist/collection/group.js
npm notice 39.5kB dist/collection/index.js
npm notice 5.9kB dist/computed/index.js
npm notice 8.7kB dist/event/index.js
npm notice 705B dist/index.js
npm notice 4.1kB dist/integrations/index.js
npm notice 11.7kB dist/logger/index.js
npm notice 8.1kB dist/runtime/index.js
npm notice 19.0kB dist/state/index.js
npm notice 9.2kB dist/storages/index.js
npm notice 847B dist/integrations/integration.js
npm notice 2.7kB dist/internal.js
npm notice 3.2kB dist/collection/item.js
npm notice 5.0kB dist/runtime/observer.js
npm notice 8.3kB dist/storages/persistent.js
npm notice 1.4kB dist/runtime/runtime.job.js
npm notice 6.2kB dist/collection/selector.js
npm notice 6.2kB dist/state/state.observer.js
npm notice 8.2kB dist/state/state.persistent.js
npm notice 873B dist/state/state.runtime.job.js
npm notice 5.7kB dist/storages/storage.js
npm notice 12.1kB dist/runtime/subscription/sub.controller.js
npm notice 933B dist/runtime/subscription/container/SubscriptionContainer.js
npm notice 13.7kB dist/utils.js
npm notice 881B package.json
npm notice 873B CHANGELOG.md
npm notice 3.9kB dist/agile.d.ts <-- here
npm notice 657B dist/runtime/subscription/container/CallbackSubscriptionContainer.d.ts
npm notice 2.8kB dist/collection/collection.persistent.d.ts
npm notice 611B dist/runtime/subscription/container/ComponentSubscriptionContainer.d.ts
npm notice 636B dist/computed/computed.tracker.d.ts
npm notice 454B dist/event/event.job.d.ts
npm notice 983B dist/event/event.observer.d.ts
npm notice 3.9kB dist/collection/group.d.ts
npm notice 13.6kB dist/collection/index.d.ts
npm notice 2.4kB dist/computed/index.d.ts
npm notice 4.6kB dist/event/index.d.ts
npm notice 89B dist/index.d.ts
npm notice 1.0kB dist/integrations/index.d.ts
npm notice 5.5kB dist/logger/index.d.ts
npm notice 1.8kB dist/runtime/index.d.ts
npm notice 8.8kB dist/state/index.d.ts
npm notice 2.6kB dist/storages/index.d.ts
npm notice 1.4kB dist/integrations/integration.d.ts
npm notice 1.2kB dist/internal.d.ts
npm notice 1.2kB dist/collection/item.d.ts
npm notice 2.6kB dist/runtime/observer.d.ts
npm notice 3.1kB dist/storages/persistent.d.ts
npm notice 1.5kB dist/runtime/runtime.job.d.ts
npm notice 2.0kB dist/collection/selector.d.ts
npm notice 1.8kB dist/state/state.observer.d.ts
npm notice 1.9kB dist/state/state.persistent.d.ts
npm notice 762B dist/state/state.runtime.job.d.ts
npm notice 2.4kB dist/storages/storage.d.ts
npm notice 3.8kB dist/runtime/subscription/sub.controller.d.ts
npm notice 769B dist/runtime/subscription/container/SubscriptionContainer.d.ts
npm notice 4.8kB dist/utils.d.ts
npm notice === Tarball Details ===
npm notice name: @agile-ts/core
npm notice version: 0.0.11
npm notice filename: agile-ts-core-0.0.11.tgz
npm notice package size: 49.7 kB
npm notice unpacked size: 303.2 kB
npm notice shasum: 7bd2ddbe763044eadb84e6f76e5931a914bb29fa
npm notice integrity: sha512-ah003tIai2jRs[...]vvov1cKDMpOCw==
npm notice total files: 64
npm notice
agile-ts-core-0.0.11.tgz
Done in 4.52s.

Without Comments: (agile.js)

npm notice
npm notice package: @agile-ts/core@0.0.11
npm notice === Tarball Contents ===
npm notice 3.0kB dist/agile.js <-- here
npm notice 794B dist/runtime/subscription/container/CallbackSubscriptionContainer.js
npm notice 14.7kB dist/collection/collection.persistent.js
npm notice 762B dist/runtime/subscription/container/ComponentSubscriptionContainer.js
npm notice 1.8kB dist/computed/computed.tracker.js
npm notice 576B dist/event/event.job.js
npm notice 1.1kB dist/event/event.observer.js
npm notice 9.6kB dist/collection/group.js
npm notice 39.5kB dist/collection/index.js
npm notice 5.9kB dist/computed/index.js
npm notice 8.7kB dist/event/index.js
npm notice 705B dist/index.js
npm notice 4.1kB dist/integrations/index.js
npm notice 11.7kB dist/logger/index.js
npm notice 8.1kB dist/runtime/index.js
npm notice 19.0kB dist/state/index.js
npm notice 9.2kB dist/storages/index.js
npm notice 847B dist/integrations/integration.js
npm notice 2.7kB dist/internal.js
npm notice 3.2kB dist/collection/item.js
npm notice 5.0kB dist/runtime/observer.js
npm notice 8.3kB dist/storages/persistent.js
npm notice 1.4kB dist/runtime/runtime.job.js
npm notice 6.2kB dist/collection/selector.js
npm notice 6.2kB dist/state/state.observer.js
npm notice 8.2kB dist/state/state.persistent.js
npm notice 873B dist/state/state.runtime.job.js
npm notice 5.7kB dist/storages/storage.js
npm notice 12.1kB dist/runtime/subscription/sub.controller.js
npm notice 933B dist/runtime/subscription/container/SubscriptionContainer.js
npm notice 13.7kB dist/utils.js
npm notice 881B package.json
npm notice 873B CHANGELOG.md
npm notice 1.8kB dist/agile.d.ts <-- here
npm notice 657B dist/runtime/subscription/container/CallbackSubscriptionContainer.d.ts
npm notice 2.8kB dist/collection/collection.persistent.d.ts
npm notice 611B dist/runtime/subscription/container/ComponentSubscriptionContainer.d.ts
npm notice 636B dist/computed/computed.tracker.d.ts
npm notice 454B dist/event/event.job.d.ts
npm notice 983B dist/event/event.observer.d.ts
npm notice 3.9kB dist/collection/group.d.ts
npm notice 13.6kB dist/collection/index.d.ts
npm notice 2.4kB dist/computed/index.d.ts
npm notice 4.6kB dist/event/index.d.ts
npm notice 89B dist/index.d.ts
npm notice 1.0kB dist/integrations/index.d.ts
npm notice 5.5kB dist/logger/index.d.ts
npm notice 1.8kB dist/runtime/index.d.ts
npm notice 8.8kB dist/state/index.d.ts
npm notice 2.6kB dist/storages/index.d.ts
npm notice 1.4kB dist/integrations/integration.d.ts
npm notice 1.2kB dist/internal.d.ts
npm notice 1.2kB dist/collection/item.d.ts
npm notice 2.6kB dist/runtime/observer.d.ts
npm notice 3.1kB dist/storages/persistent.d.ts
npm notice 1.5kB dist/runtime/runtime.job.d.ts
npm notice 2.0kB dist/collection/selector.d.ts
npm notice 1.8kB dist/state/state.observer.d.ts
npm notice 1.9kB dist/state/state.persistent.d.ts
npm notice 762B dist/state/state.runtime.job.d.ts
npm notice 2.4kB dist/storages/storage.d.ts
npm notice 3.8kB dist/runtime/subscription/sub.controller.d.ts
npm notice 769B dist/runtime/subscription/container/SubscriptionContainer.d.ts
npm notice 4.8kB dist/utils.d.ts
npm notice === Tarball Details ===
npm notice name: @agile-ts/core
npm notice version: 0.0.11
npm notice filename: agile-ts-core-0.0.11.tgz
npm notice package size: 49.1 kB
npm notice unpacked size: 297.9 kB
npm notice shasum: c419ee14a5495a9729175c0229f449439f39825d
npm notice integrity: sha512-cswGLKEalC+p4[...]DnotQ8gWPRsIg==
npm notice total files: 64
npm notice
agile-ts-core-0.0.11.tgz
Done in 3.62s.

Benno · Answer 2 · Sun Feb 28 2021 17:49:23 GMT+0800 (China Standard Time)

removing comments would at least reduce the bundle size about 50%

Benno · Answer 3 · Sun Feb 28 2021 20:40:14 GMT+0800 (China Standard Time)

core size: 57kB to 36.3kB
react size: 5.3kB to 6.3kB idk
api size: 2kB to 4.6kB idk
multieditor size: 14.2 to 10.6kB

Benno · Answer 4 · Sun Feb 28 2021 20:55:30 GMT+0800 (China Standard Time)

I guess after a little research, more than to remove the comments I can't do...
outsourcing typescript is for me no option

Benno · Answer 5 · Sun Feb 28 2021 20:59:34 GMT+0800 (China Standard Time)

and outsourcing the event reduces the package size about 2kb.. also not worth it

Benno · Answer 6 · Wed Mar 03 2021 00:09:33 GMT+0800 (China Standard Time)

well although I have removed the comments.. I can't see any changes in bundlephobia
https://bundlephobia.com/result?p=@agile-ts/core@0.0.12
https://bundlephobia.com/result?p=@agile-ts/core@0.0.11
but well in npm it went from 300kb to 200kb
https://www.npmjs.com/package/@agile-ts/core/v/0.0.12
https://www.npmjs.com/package/@agile-ts/core/v/0.0.11

Benno · Answer 7 · Sat Mar 20 2021 13:44:16 GMT+0800 (China Standard Time)

https://stackoverflow.com/questions/66443484/how-does-the-unpacked-size-affect-the-minified-size-of-an-npm-pckage

Benno · Answer 8 · Sat Mar 20 2021 21:28:09 GMT+0800 (China Standard Time)

https://www.reddit.com/r/node/comments/m90wp2/how_does_the_unpacked_size_affect_the_minified/

Benno · Answer 9 · Sat Mar 20 2021 21:29:43 GMT+0800 (China Standard Time)

the last option to reduce the bundle size could be to split everything up.. so that collection, event, computed are separate packages.. but I see no other point in doing so.. so I will remain with the large bundle size..