[Lens] Reduce initial bundle size

[flash1293]

This PR arranges a few imports to make the initial Lens bundle as small as possible. The current Lens bundle loads almost all of the code in the plugin and has >800kb. This PR brings this number down to 270kb (200kb of that being lodash which will be moved to shared bundles anyway: #78100 ).

The loading behavior in this PR is not optimal, but I think it's a good start and can be improved in subsequent PRs

This PR changes a few things:

• Align individual visualizations: there is an expression.ts file containing renderer and expression function, and a visualization.ts file containing the visualization definition along with editor UI and so on. <name>_visualization.ts is the file being lazily imported, re-exporting both visualization.ts and expression.ts.
• Move plugin global styles into individual component stylesheets. There were a mixin and some variables, but they weren't actually shared - I moved them into the consuming stylesheets
• Change the registration of datasources and visualizations from a Promise to a function returning a Promise (basically a lazy promise). This allows to lazily load the visualizations and datasources when either the embeddable or the editor is collecting them. The logic for this was already in place for resolving start services, it's just calling the function before resolving the promise now
• Move the expression function/renderer registration as well as the visualization definition into a dynamic import in the registered function for each visualization and the datasource.
• Lazily load the editor frame component plus child components (they were only used in a single place anyway)
• Introduce a single module re-exporting all visualizations and datasources from a single place and using that for the lazy import to prevent a burst of individual modules loading at the same time.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[cchaos]

Mixin and variable files should still be their own file (even if they're used by only a single component right now). Then what you do is import them in the SASS files that need them instead of relying on a manifest.

[flash1293]

@cchaos Reverted mixin and variable files and import them when needed.

[cchaos]

Sorry one more thing. Only _index.scss files should be manifest files. You'll need to either revert this back to an index file or put all the imports of these files in their respective JS files.

[cchaos]

This should be moved to the variables file.

[flash1293]

@cchaos Split scss up into multiple files, no reason to keep an import structure for scss

@wylieconlon Introduced a general re-export file to collapse the async bundles. I added the app bundle as well as this was causing cascading dynamic imports, adding a roundtrip latency. I think we can do better in general, but I think the current state is a pretty good improvement for little work to improve 7.10 bundle sizes.

[cchaos]

👍 Thanks. Looks like my PR caused some conflicts though. Sorry 😆

[wylieconlon]

Tested locally and LGTM. I think the description is a little out of date now that it's a single bundle.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: ca67b3c

Metrics [docs]

@kbn/optimizer bundle module count

id	value	diff	baseline
lens	560	+86	474

async chunks size

id	value	diff	baseline
lens	995.6KB	⚠️ +962.5KB	33.1KB

distributable file count

id	value	diff	baseline
default	45850	+3	45847

page load bundle size

id	value	diff	baseline
lens	139.6KB	-925.9KB	1.0MB

History

• 💚 Build #76836 succeeded f31ef12
• 💛 Build #76503 was flaky 1f88e41
• 💚 Build #76159 succeeded 674481b
• 💔 Build #76147 failed 18507cd

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream