Feature: Decrease bundle size by including only specified methods

[styxlab]

I am using the js-client with Next.js and the netlifyAPI class increases my bundle size by approx. 20 KB, although I am using just a few methods. This is too much for a typical SPA and should be reduced. I have not found a way to include only the methods I actually need, which would substantially reduce the bundle size.

I think the problem is that all methods specified are exported:

js-client/src/index.js

Line 99 in 960089a

module.exports.methods = getOperations()

js-client/src/operations.js

Line 1 in 960089a

const { paths } = require('@netlify/open-api')

Feature request: Implement a configuration option which allows only to include pre-specified methods with the aim to substantially reduce bundle size.

[ehmicky]

Hi @styxlab,

Thanks a lot for point that out! Reducing the bundle size is definitely a good thing.

I would recommend using a tool like source-map-explorer for diagnosing this.

Note: the sizes in that graph represent the uncompressed file sizes and do not take into account things like node_modules being shared between libraries.

From what we can see, the src directory is a problem in terms of absolute size. Actually, most methods do exactly the same logic, so adding/removing more methods should have a very small impact on the size of the src directory.

In contrast, we've identified the following potential problems in terms of size:

1. The biggest one is the size of the Netlify OpenAPI definition which is ~200KB after normalization. We could fetch that file at runtime instead of having it as a dependencies. This would help with the bundle size, but this would have a small impact on performance, reliability and code complexity. We would need to host the OpenAPI definition somewhere, although that should be ok (we could host it as a Netlify Site for example). So there are some trade-offs in reducing the bundle size that should be considered.
2. The second biggest one is the Webpack bundle that is shipped with this package (see How to use the UMD version in a webpack environment? #87). That bundle is experimental and there is some additional work that is needed to remove Node.js libraries. We probably should publish this as a separate npm package.
3. The third one is the size of the npm dependencies. That being said, I think their size is not too big for a typical library of this scope. Reducing their size is always a nice-to-have, but every dependency is here to provide a specific feature or utility, so we would need to consider the cost of removing or replacing any of them.

[styxlab]

Thanks for this thorough analysis and your willingness to look into reducing the bundle size. In the meantime, however, I switched to using the endpoints directly utilizing js-fetch. Maybe this is an unfair comparison as fetch() is already part of my bundle, but that way I can save 20KB on every route/module that is using netlify and I start wondering what I needed the js-client for. Of course, I had to write a few helper methods and hooks for convenience, but usage is now almost identical.

Maybe this is another direction you might want to consider: Provide a few lightweight js-helpers for node and React that act as simple wrappers of the original endpoints instead of trying to reduce a big package that is hard to optimize.