[bundle optimization] fix imports of react-use lib #82847

alexwizp · 2020-11-06T15:22:34Z

Summary

Currently, when importing from the react-use library, we are importing all the code, which increases the size of our final bundle. A simple fix for the import solves this problem

in total -1.3 MB 🥳

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2020-11-06T17:16:31Z

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

jfsiii

LGTM for Ingest Manager. Thanks! We documented the issue and fix as part of #82160

elasticmachine · 2020-11-06T18:09:42Z

Pinging @elastic/uptime (Team:uptime)

elasticmachine · 2020-11-06T18:09:42Z

Pinging @elastic/apm-ui (Team:apm)

elasticmachine · 2020-11-06T18:09:43Z

Pinging @elastic/ingest-management (Team:Ingest Management)

MichaelMarcialis

LGTM

alexwizp · 2020-11-08T22:00:19Z

@elasticmachine merge upstream

darnautov

Transform changes LGTM

afgomez

Infra changes LGTM.

I wonder if we have explored automating this via babel-plugin-transform-imports. I don't know anything about our build system though, so maybe it's not possible.

stratoula

Kibana App changes LGTM!

sorenlouv

apm changes lgtm

alexwizp · 2020-11-09T12:40:29Z

@elasticmachine merge upstream

alexwizp · 2020-11-09T20:43:41Z

ping @elastis/siem @elastic/uptime @elastic/endpoint-app-team

elasticmachine · 2020-11-09T20:44:23Z

Pinging @elastic/siem (Team:SIEM)

alexwizp · 2020-11-10T08:53:11Z

@elasticmachine merge upstream

patrykkopycinski · 2020-11-10T09:10:47Z

@alexwizp can we add some check to make sure we don't break this pattern in the future again? Maybe babel-plugin to rewrite those paths automatically or at least eslint rule like here?
https://github.com/elastic/kibana/blob/master/.eslintrc.js#L597-L604

andrewvc

LGTM

kibanamachine · 2020-11-10T13:26:03Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 10f5639

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`apm`	1275	1157	-118
`home`	207	79	-128
`infra`	1145	1036	-109
`ingestManager`	535	408	-127
`lens`	559	431	-128
`logstash`	189	61	-128
`transform`	337	209	-128
`uptime`	657	529	-128
`visDefaultEditor`	240	115	-125
`visualize`	205	78	-127
total			-1246

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`apm`	3.2MB	3.1MB	-127.8KB
`home`	348.4KB	214.4KB	-134.0KB
`infra`	2.6MB	2.5MB	-87.9KB
`ingestManager`	1.2MB	1.1MB	-133.6KB
`lens`	1.0MB	909.3KB	-133.3KB
`logstash`	194.4KB	60.8KB	-133.6KB
`transform`	1.1MB	1.0MB	-133.9KB
`uptime`	1.1MB	983.1KB	-134.0KB
`visDefaultEditor`	431.6KB	299.4KB	-132.1KB
`visualize`	259.7KB	126.2KB	-133.5KB
total			-1.3MB

Distributable file count

id	before	after	diff
`default`	42766	42763	-3

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`home`	20.9KB	20.9KB	-1.0B
`infra`	174.2KB	174.0KB	-151.0B
`logstash`	25.9KB	25.9KB	-1.0B
`transform`	24.5KB	24.5KB	-1.0B
`uptime`	25.2KB	25.1KB	-65.0B
`visualize`	40.1KB	40.1KB	-1.0B
total			-220.0B

Unknown metric groups

async chunk count

id	before	after	diff
`infra`	15	14	-1

History

💚 Build #87019 succeeded 26cdc3c
💚 Build #86879 succeeded 1a7688c
💚 Build #86803 succeeded 1f3a9f2
💚 Build #86724 succeeded 293cab6
💚 Build #86623 succeeded a2c08ba

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

patrykkopycinski

SIEM/Endpoint LGTM

* [bundle optimization] fix imports of react-use lib * add 2 more files * add rule into eslintrc.js Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* [bundle optimization] fix imports of react-use lib * add 2 more files * add rule into eslintrc.js Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…kibana into bootstrap-node-details-overlay * 'bootstrap-node-details-overlay' of github.com:phillipb/kibana: (49 commits) [Security Solution] Fix DNS Network table query (elastic#82778) [Workplace Search] Consolidate groups routes (elastic#83015) Adds cloud links to user menu (elastic#82803) [Security Solution][Detections] - follow up cleanup on auto refresh rules (elastic#83023) [App Search] Added the log retention panel to the Settings page (elastic#82982) [Maps] show icon when layer is filtered by time and allow layers to ignore global time range (elastic#83006) [DOCS] Consolidates drilldown pages (elastic#82081) [Maps] add on-prem EMS config (elastic#82525) migrate i18n mixin to KP (elastic#81799) [bundle optimization] fix imports of react-use lib (elastic#82847) [Discover] Add metric on adding filter (elastic#82961) [Lens] Performance refactoring for indexpattern fast lookup and Operation support matrix computation (elastic#82829) skip flaky suite (elastic#82804) Fix SO query for searching across spaces (elastic#83025) renaming built-in alerts to Stack Alerts (elastic#82873) [TSVB] Disable using top_hits in pipeline aggregations (elastic#82278) [Visualizations] Remove kui usage (elastic#82810) [Visualizations] Make the icon buttons labels more descriptive (elastic#82585) [Lens] Do not reset formatting when switching between custom ranges and auto histogram (elastic#82694) Fix ilm navigation (elastic#81664) ...

…na into alerts/stack-alerts-public * 'alerts/stack-alerts-public' of github.com:gmmorris/kibana: [Security Solution] Fix DNS Network table query (elastic#82778) [Workplace Search] Consolidate groups routes (elastic#83015) Adds cloud links to user menu (elastic#82803) [Security Solution][Detections] - follow up cleanup on auto refresh rules (elastic#83023) [App Search] Added the log retention panel to the Settings page (elastic#82982) [Maps] show icon when layer is filtered by time and allow layers to ignore global time range (elastic#83006) [DOCS] Consolidates drilldown pages (elastic#82081) [Maps] add on-prem EMS config (elastic#82525) migrate i18n mixin to KP (elastic#81799) [bundle optimization] fix imports of react-use lib (elastic#82847) [Discover] Add metric on adding filter (elastic#82961) [Lens] Performance refactoring for indexpattern fast lookup and Operation support matrix computation (elastic#82829) skip flaky suite (elastic#82804) Fix SO query for searching across spaces (elastic#83025) renaming built-in alerts to Stack Alerts (elastic#82873) [TSVB] Disable using top_hits in pipeline aggregations (elastic#82278) [Visualizations] Remove kui usage (elastic#82810) [Visualizations] Make the icon buttons labels more descriptive (elastic#82585) [Lens] Do not reset formatting when switching between custom ranges and auto histogram (elastic#82694) :

elasticmachine · 2021-09-22T15:35:41Z

Pinging @elastic/security-solution (Team: SecuritySolution)

[bundle optimization] fix imports of react-use lib

15c6700

alexwizp force-pushed the react-use branch from 1697534 to 15c6700 Compare November 6, 2020 15:26

alexwizp self-assigned this Nov 6, 2020

alexwizp added Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.11.0 v8.0.0 Feature:Build Packaging release_note:skip Skip the PR/issue when compiling release notes labels Nov 6, 2020

alexwizp requested review from stratoula and timroes November 6, 2020 15:36

alexwizp marked this pull request as ready for review November 6, 2020 17:16

alexwizp requested review from a team as code owners November 6, 2020 17:16

alexwizp requested review from a team November 6, 2020 17:16

alexwizp requested review from a team as code owners November 6, 2020 17:16

jfsiii approved these changes Nov 6, 2020

View reviewed changes

botelastic bot added Team:APM All issues that need APM UI Team support Team:Fleet Team label for Observability Data Collection Fleet team Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Nov 6, 2020

MichaelMarcialis approved these changes Nov 6, 2020

View reviewed changes

Merge branch 'master' into react-use

a2c08ba

darnautov approved these changes Nov 9, 2020

View reviewed changes

afgomez self-requested a review November 9, 2020 09:59

afgomez approved these changes Nov 9, 2020

View reviewed changes

stratoula approved these changes Nov 9, 2020

View reviewed changes

sorenlouv approved these changes Nov 9, 2020

View reviewed changes

kibanamachine and others added 4 commits November 9, 2020 07:40

Merge branch 'master' into react-use

293cab6

Merge remote-tracking branch 'upstream/master' into react-use

5ba66b8

add 2 more files

1f3a9f2

Merge remote-tracking branch 'upstream/master' into react-use

1a7688c

alexwizp added the Team:SIEM label Nov 9, 2020

Merge branch 'master' into react-use

26cdc3c

add rule into eslintrc.js

10f5639

andrewvc approved these changes Nov 10, 2020

View reviewed changes

patrykkopycinski approved these changes Nov 10, 2020

View reviewed changes

alexwizp merged commit b2d6b66 into elastic:master Nov 10, 2020

alexwizp mentioned this pull request Nov 10, 2020

[7.x] [bundle optimization] fix imports of react-use lib (#82847) #83053

Merged

alexwizp deleted the react-use branch January 16, 2021 15:27

MindyRS added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label Sep 22, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[bundle optimization] fix imports of react-use lib #82847

[bundle optimization] fix imports of react-use lib #82847

alexwizp commented Nov 6, 2020 •

edited

Loading

elasticmachine commented Nov 6, 2020

jfsiii left a comment

elasticmachine commented Nov 6, 2020

elasticmachine commented Nov 6, 2020

elasticmachine commented Nov 6, 2020

MichaelMarcialis left a comment

alexwizp commented Nov 8, 2020

darnautov left a comment

afgomez left a comment

stratoula left a comment

sorenlouv left a comment

alexwizp commented Nov 9, 2020

alexwizp commented Nov 9, 2020

elasticmachine commented Nov 9, 2020

alexwizp commented Nov 10, 2020

patrykkopycinski commented Nov 10, 2020

andrewvc left a comment

kibanamachine commented Nov 10, 2020

async chunk count

patrykkopycinski left a comment

elasticmachine commented Sep 22, 2021

[bundle optimization] fix imports of react-use lib #82847

[bundle optimization] fix imports of react-use lib #82847

Conversation

alexwizp commented Nov 6, 2020 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Nov 6, 2020

jfsiii left a comment

Choose a reason for hiding this comment

elasticmachine commented Nov 6, 2020

elasticmachine commented Nov 6, 2020

elasticmachine commented Nov 6, 2020

MichaelMarcialis left a comment

Choose a reason for hiding this comment

alexwizp commented Nov 8, 2020

darnautov left a comment

Choose a reason for hiding this comment

afgomez left a comment

Choose a reason for hiding this comment

stratoula left a comment

Choose a reason for hiding this comment

sorenlouv left a comment

Choose a reason for hiding this comment

alexwizp commented Nov 9, 2020

alexwizp commented Nov 9, 2020

elasticmachine commented Nov 9, 2020

alexwizp commented Nov 10, 2020

patrykkopycinski commented Nov 10, 2020

andrewvc left a comment

Choose a reason for hiding this comment

kibanamachine commented Nov 10, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Distributable file count

Page load bundle

async chunk count

History

patrykkopycinski left a comment

Choose a reason for hiding this comment

elasticmachine commented Sep 22, 2021

alexwizp commented Nov 6, 2020 •

edited

Loading