Auth0.js: Reduce impact of auth0-js on bundle size

[edmorley]

Hi!

The auth0-js package currently adds 104KB to apps' minified bundle size:
https://bundlephobia.com/[email protected]
https://unpkg.com/[email protected]/dist/

This is larger than:

• react + react-dom (96KB)
• jQuery (85KB)
• lodash (69KB)

Please could this be reduced?

One idea might be to use the external rollup option to stop those packages listed in dependencies from being inlined in the ESM version of the bundle - which would at least allow other packages to share common dependencies.

Another might be to investigate whether "sideEffects": "false" can be used to improve tree shakability (which would likely amplify the affects of using externals too):
https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

Finally, reducing the number (or size) dependencies would help:

• idtoken-verifier doesn't have a module entrypoint using ES6 imports/exports, so can't be tree-shaken
• superagent adds 17KB (stats), whereas the whatwg-fetch polyfill is half that

[luisrudge]

What happens if I put a module on external and the project importing auth0-js doesn't have the package installed?

There's still lots to do, but the bulk of the work to allow tree shaking is done (migrate to es modules + rollup). The idea is to start exporting smaller pieces of the library so you can just import what you want. There's no ETA to start this task, but it's where we want to be.

For now, 30kb gzipped is good enough.

[edmorley]

Hi! Sorry for the delayed reply.

Please can this be reopened? Closing it without a chance for me to reply seems a bit abrupt; and whilst the work may be planned that doesn't mean there isn't the need for an issue open to track it?

What happens if I put a module on external and the project importing auth0-js doesn't have the package installed?

The new packages marked as external would be listed in dependencies, and for users not using a package manager, they would use a separate "completely bundled" file (this pattern is found quite a bit in packages that are used both via a package manager and direct <script> includes).

For now, 30kb gzipped is good enough.

I opened this issue because this package is in fact one of the larger ones we're using. If it were small enough then it wouldn't be at the top of the list... :-)

[luisrudge]

Feel free to send a PR that marks dependencies as external. I'd love to have that in 🎉

As for the final bundle size, switching libraries etc yield little to no difference in the gzipped size, so really no point in doing that.

What features of Auth0.js are you using in your code?

[akotlar]

Isomorphic-unfetch is 941 bytes. Superagent is 5.5K. 6KB is 20%, that seems like a worthwhile place to start.

[wpitallo]

Hi, I also think this should be looked at, is there no way to reduce the size of the bundle or only use specific modules? Currently this has the largest footprint in my vendor bundle and it seems a bit excessive.

[lsim]

Two years on and auth0 is still weighing in at around the originally reported 104kb. What happened to the 30kb mentioned? It's currently nearly half the weight of my app!

---

Rollup File Analysis

bundle size: 228.457 KB
original size: 223.034 KB
code reduction: 0 %
module count: 21

██████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░
file: /node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js
bundle space: 45.4 %
rendered size: 103.715 KB
original size: 103.343 KB
code reduction: 0 %