[Meta] Reducing Kibana bundle sizes

[Bamieh]

I was checking opportunities for us to improve page load perofmance for kibana. This is a meta issue with some of my findings. We can create PRs or separate issues for tackling each one on the list individually. I only looked at package.json dependencies; maybe we can get rid of some devDependencies as well to reduce yarn install time in the future.

Bundle specific changes

Copied from https://github.com/elastic/kibana/issues/95853

One of our goals is to keep Kibana fast. A large part of this is to reduce the amount of Javascript that is downloaded and parsed on each page load. We have for some time provided bundle size metrics on pull requests. From the docs:

The size of the entry file produced for each bundle/plugin. This file is always loaded on every page load, so it should be as small as possible. To reduce this metric you can put any code that isn’t necessary on every page load behind an async import().

Code that is shared statically with other plugins will contribute to the page load bundle size of that plugin. This includes exports from the public/index.ts file and any file referenced by the extraPublicDirs manifest property.

• [x] https://github.com/elastic/kibana/pull/64631
• [x] https://github.com/elastic/kibana/pull/64638
• [x] https://github.com/elastic/kibana/pull/64749
• [x] https://github.com/elastic/kibana/pull/64778
• [x] #64192
• [x] #64317
• [x] https://github.com/elastic/kibana/pull/64769
• [x] https://github.com/elastic/kibana/pull/65257
• [ ] https://github.com/elastic/kibana/issues/89025
• [ ] https://github.com/elastic/kibana/issues/95890
• [x] https://github.com/elastic/kibana/issues/104697
• [ ] https://github.com/elastic/kibana/issues/112832
  • [x] https://github.com/elastic/kibana/issues/84788
  • [ ] https://github.com/elastic/kibana/issues/114988
  • [ ] https://github.com/elastic/kibana/issues/114990

Cross bundle changes

• [ ] We have multiple encryption libraries (request-crypto, node-crypto, jsonwebtoken and node-forge) A lot of functionality is shared between these libraries, maybe we can get rid of node-forge in favor of node-crypto)

• [ ] We have multiple http fetch libraries: nock, whatwg-fetch, node-fetch, request, load-json-file. Maybe it is worth exploring getting rid of most of those.

• [ ] We have multiple glob libraries: glob, glob-all, globby, minimatch. They all have very similar feature set. Maybe we can explore the possiblity of only ussing 1 package.

• [ ] We have multiple unique id generation packages: seedrandom, uuid. EUI also provides a helper as well to generate uuids. Maybe we can explore using 1 of them only.

• [ ] We have many JSON helper tools: rison-node, JSONStream, deep-freeze-strict, fast-deep-equal, hjson, idx, object-hash, object-path-immutable, set-value. Some of those are only used in 1 place, maybe its worth exploring removing those big libraries.

• [ ] We have two unzip libraries: yauzl, tar. Can we remove one of them?

• [ ] We have at least five redux-like state management packages. https://github.com/elastic/kibana/issues/101253

• [ ] remove deprecated intl-relativeformat and update intl-messageformat to the version relying on the global Intl object. https://github.com/elastic/kibana/issues/38642

• [ ] font-awesome is no longer used in EUI. Do we have a plan to get rid of it completely?

• [ ] We are using the complete lodash + few fp.lodash packages. Maybe we can encourage using the fp.lodash packages to only use what we need?

• [ ] We have node APIs usages in client code that are polyfilled and bloat bundles https://github.com/elastic/kibana/issues/107280

• [ ] Use packages' target_web builds to ensure browser compatibility (https://github.com/elastic/kibana/pull/130874)

Complete

• [x] Webpack and some of its plugins are in dependencies instead of a devDependencies (@mistic https://github.com/elastic/kibana/pull/88284)

• [x] Get rid of the xregexp regular expressions library (almost 1mb): I believe we can replace it with native regexp since all features needed are supported natively now. (@bamieh https://github.com/elastic/kibana/pull/91369)

• [x] remove Bluebird in favor of native Promises. Native promises caught up with both performance and features to what bluebird used to offer. (@watson https://github.com/elastic/kibana/pull/118097)

• [x] Angular is going to be killed by google this year in december. What are our plans to completely remove it?

• [x] We have two duplicate deps: statehood (deprecated) and @hapi/statehood. Can we get rid of one? https://github.com/elastic/kibana/pull/93592

• [x] move cheerio as dependency to devDependencies. (@pgayvallet https://github.com/elastic/kibana/pull/92136)

• [x] @storybook/addons as a dependency instead of a dev dependency. (@pgayvallet https://github.com/elastic/kibana/pull/92136)

• [x] get rid of react-portal since it is not used anywhere. (@pgayvallet https://github.com/elastic/kibana/pull/92136)

• [x] get rid of vscode-languageserver since it is not used anywhere. (@pgayvallet https://github.com/elastic/kibana/pull/92136)

• [x] Import node-libs-browser polyfills in the @kbn/ui-shared-deps-npm package to avoid importing them in all bundles (@afharo https://github.com/elastic/kibana/pull/130877)

Moving packages from dependencies to devDependencies is just for keeping things tidy. Operations filter down unused dependencies before bundling. Feel free to edit this issue ❤️

[elasticmachine]

Pinging @elastic/kibana-core (Team:Core)

[elasticmachine]

Pinging @elastic/kibana-operations (Team:Operations)

[mshustov]

There are lots of packages duplicated in yarn.lock with different versions(see d3, vega, and others). Is it possible to automate the check that dependency update reduces the number of different versions?

[spalger]

We have a step in kbn bootstrap that inspects the yarn.lock, package.json, etc, and could definitely implement some dedupe validation if we could define the exact criteria we want to implement. I'm in favor of keeping a list of dependencies which we explicitly want to limit like we've done for lodash

[Bamieh]

I've created a PR to remove xregexp dependency from the codebase (https://github.com/elastic/kibana/pull/91369)

[mshustov]

@Bamieh are there any plans to remove deprecated intl-relativeformat and update intl-messageformat to the version relying on the global Intl object?

[Bamieh]

@restrry yes! I have an issue for upgrading those in the backlog. I'll add it to the list above too :+1:

[mshustov]

@Bamieh Some code still uses Bluebird we can migrate to native Promises instead

[Bamieh]

@restrry added to the list. Native promises caught up with both performance and features to what bluebird used to offer.

[Bamieh]

I've created a PR to remove bluebird dependency from the codebase (https://github.com/elastic/kibana/pull/95191)

[watson]

I took a stab at removing bluebird in main: #118097

[watson]

Bluebird removed ✅

[Bamieh]

@watson you're awesome :) thanks

[vadimkibana]

AppServices is the main user of rison-node.