This PR enables tree-shaking so that people importing the library won't have to import the entire thing.
We achieve this by doing the following:
Switching the bundler from using rollup directly to using dts-cli (a fork of tsdx) which adds supports using the preserveModules build option. This is different from us simply enabling the preserveModules flag since using the current dts setup we can bundle both CJS and ESM modules with minimal config from our part.
Converting all lodash imports to automatically import from lodash-es. This comes free with tsdx/dts (assuming we do not import the entire lodash package using import _ from "lodash" or use _.chain since we can't tree-shake that.
Add the "sideEffects": false to the package.json so that when bundles import our library they know they can tree-shake unused imports.
Bundle Size Comparison
Testing was done by compiling my Slippi Stats project and using the yarn run analyze command.
Before
The original bundle size was around 2MB all up.
After
Source Map Comparison
Before
After
Conclusion
As you can see, we can reduce Stats App bundle size from 2MB down to around 1MB just by enabling tree shaking. The biggest difference is that the enet library (around 725KB) no longer gets imported at all since it's not used. This makes a huge difference for all web based projects that are installing slippi-js.
By explicitly importing the required lodash functions and not using _.chain, we can further reduce the size of the slippi-js bundle from around 249KB down to 141KB. This is all while preserving the existing library API, mostly just by changing the way we do imports and bundling.
Description
This PR enables tree-shaking so that people importing the library won't have to import the entire thing.
We achieve this by doing the following:
rollupdirectly to usingdts-cli(a fork oftsdx) which adds supports using thepreserveModulesbuild option. This is different from us simply enabling thepreserveModulesflag since using the currentdtssetup we can bundle both CJS and ESM modules with minimal config from our part.lodashimports to automatically import fromlodash-es. This comes free withtsdx/dts(assuming we do not import the entire lodash package usingimport _ from "lodash"or use_.chainsince we can't tree-shake that."sideEffects": falseto thepackage.jsonso that when bundles import our library they know they can tree-shake unused imports.Bundle Size Comparison
Testing was done by compiling my Slippi Stats project and using the
yarn run analyzecommand.Before
The original bundle size was around 2MB all up.
After
Source Map Comparison
Before
After
Conclusion
As you can see, we can reduce Stats App bundle size from 2MB down to around 1MB just by enabling tree shaking. The biggest difference is that the
enetlibrary (around 725KB) no longer gets imported at all since it's not used. This makes a huge difference for all web based projects that are installingslippi-js.By explicitly importing the required
lodashfunctions and not using_.chain, we can further reduce the size of theslippi-jsbundle from around 249KB down to 141KB. This is all while preserving the existing library API, mostly just by changing the way we do imports and bundling.