Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Kibana Overview] Shift SCSS import and lazy-load main component #204661

Merged
merged 1 commit into from
Dec 19, 2024

Conversation

tsullivan
Copy link
Member

@tsullivan tsullivan commented Dec 17, 2024

Summary

Part of https://github.com/elastic/kibana-team/issues/1082

The purpose of this PR is to reduce the page load bundle size of the kibanaOverview plugin.

Converts the main component of the kibanaOverview plugin to be lazy loaded, and shifts the import of the main SCSS file to be imported from the lazily-loaded component. This PR does not include any changes that would be noticeable by end-users. It changes the internals to use a different technology for styling components.

References

  1. https://emotion.sh/docs/globals
  2. https://emotion.sh/docs/best-practices
  3. [FAQ] Kibana and Emotion / CSS-in-JS usage eui#6828 (comment)

@tsullivan tsullivan added release_note:skip Skip the PR/issue when compiling release notes backport:skip This commit does not require backporting v9.0.0 labels Dec 17, 2024
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id before after diff
kibanaOverview 55.2KB 65.6KB +10.4KB

Page load bundle

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

id before after diff
kibanaOverview 15.2KB 5.4KB -9.8KB
Unknown metric groups

async chunk count

id before after diff
kibanaOverview 2 3 +1

@tsullivan tsullivan marked this pull request as ready for review December 17, 2024 23:49
@tsullivan tsullivan requested review from a team as code owners December 17, 2024 23:49
Copy link
Contributor

@eokoneyo eokoneyo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM

@eokoneyo eokoneyo merged commit 1861bbc into elastic:main Dec 19, 2024
16 checks passed
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this pull request Dec 19, 2024
…stic#204661)

## Summary

Part of elastic/kibana-team#1082

The purpose of this PR is to reduce the page load bundle size of the
`kibanaOverview` plugin.

Converts the main component of the `kibanaOverview` plugin to be lazy
loaded, and shifts the import of the main SCSS file to be imported from
the lazily-loaded component. This PR does not include any changes that
would be noticeable by end-users. It changes the internals to use a
different technology for styling components.

## References
1. https://emotion.sh/docs/globals
2. https://emotion.sh/docs/best-practices
3.
elastic/eui#6828 (comment)
stratoula pushed a commit to stratoula/kibana that referenced this pull request Jan 2, 2025
…stic#204661)

## Summary

Part of elastic/kibana-team#1082

The purpose of this PR is to reduce the page load bundle size of the
`kibanaOverview` plugin.

Converts the main component of the `kibanaOverview` plugin to be lazy
loaded, and shifts the import of the main SCSS file to be imported from
the lazily-loaded component. This PR does not include any changes that
would be noticeable by end-users. It changes the internals to use a
different technology for styling components.

## References
1. https://emotion.sh/docs/globals
2. https://emotion.sh/docs/best-practices
3.
elastic/eui#6828 (comment)
mykolaharmash added a commit to mykolaharmash/kibana that referenced this pull request Jan 2, 2025
benakansara pushed a commit to benakansara/kibana that referenced this pull request Jan 2, 2025
…stic#204661)

## Summary

Part of elastic/kibana-team#1082

The purpose of this PR is to reduce the page load bundle size of the
`kibanaOverview` plugin.

Converts the main component of the `kibanaOverview` plugin to be lazy
loaded, and shifts the import of the main SCSS file to be imported from
the lazily-loaded component. This PR does not include any changes that
would be noticeable by end-users. It changes the internals to use a
different technology for styling components.

## References
1. https://emotion.sh/docs/globals
2. https://emotion.sh/docs/best-practices
3.
elastic/eui#6828 (comment)
mykolaharmash added a commit to mykolaharmash/kibana that referenced this pull request Jan 3, 2025
@Dosant Dosant added backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) and removed backport:skip This commit does not require backporting labels Jan 3, 2025
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12597604306

@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12597604294

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jan 3, 2025
…stic#204661)

## Summary

Part of elastic/kibana-team#1082

The purpose of this PR is to reduce the page load bundle size of the
`kibanaOverview` plugin.

Converts the main component of the `kibanaOverview` plugin to be lazy
loaded, and shifts the import of the main SCSS file to be imported from
the lazily-loaded component. This PR does not include any changes that
would be noticeable by end-users. It changes the internals to use a
different technology for styling components.

## References
1. https://emotion.sh/docs/globals
2. https://emotion.sh/docs/best-practices
3.
elastic/eui#6828 (comment)

(cherry picked from commit 1861bbc)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jan 3, 2025
…stic#204661)

## Summary

Part of elastic/kibana-team#1082

The purpose of this PR is to reduce the page load bundle size of the
`kibanaOverview` plugin.

Converts the main component of the `kibanaOverview` plugin to be lazy
loaded, and shifts the import of the main SCSS file to be imported from
the lazily-loaded component. This PR does not include any changes that
would be noticeable by end-users. It changes the internals to use a
different technology for styling components.

## References
1. https://emotion.sh/docs/globals
2. https://emotion.sh/docs/best-practices
3.
elastic/eui#6828 (comment)

(cherry picked from commit 1861bbc)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

mykolaharmash added a commit to mykolaharmash/kibana that referenced this pull request Jan 3, 2025
kibanamachine added a commit that referenced this pull request Jan 3, 2025
#204661) (#205484)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Kibana Overview] Shift SCSS import and lazy-load main component
(#204661)](#204661)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Tim
Sullivan","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-19T15:10:02Z","message":"[Kibana
Overview] Shift SCSS import and lazy-load main component (#204661)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana-team/issues/1082\r\n\r\nThe purpose of
this PR is to reduce the page load bundle size of
the\r\n`kibanaOverview` plugin.\r\n\r\nConverts the main component of
the `kibanaOverview` plugin to be lazy\r\nloaded, and shifts the import
of the main SCSS file to be imported from\r\nthe lazily-loaded
component. This PR does not include any changes that\r\nwould be
noticeable by end-users. It changes the internals to use a\r\ndifferent
technology for styling components.\r\n\r\n## References\r\n1.
https://emotion.sh/docs/globals\r\n2.
https://emotion.sh/docs/best-practices\r\n3.\r\nhttps://github.com/elastic/eui/discussions/6828#discussioncomment-10825360","sha":"1861bbc16a92afd1a2bb88521bb2110746079efd","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor"],"title":"[Kibana
Overview] Shift SCSS import and lazy-load main
component","number":204661,"url":"https://github.com/elastic/kibana/pull/204661","mergeCommit":{"message":"[Kibana
Overview] Shift SCSS import and lazy-load main component (#204661)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana-team/issues/1082\r\n\r\nThe purpose of
this PR is to reduce the page load bundle size of
the\r\n`kibanaOverview` plugin.\r\n\r\nConverts the main component of
the `kibanaOverview` plugin to be lazy\r\nloaded, and shifts the import
of the main SCSS file to be imported from\r\nthe lazily-loaded
component. This PR does not include any changes that\r\nwould be
noticeable by end-users. It changes the internals to use a\r\ndifferent
technology for styling components.\r\n\r\n## References\r\n1.
https://emotion.sh/docs/globals\r\n2.
https://emotion.sh/docs/best-practices\r\n3.\r\nhttps://github.com/elastic/eui/discussions/6828#discussioncomment-10825360","sha":"1861bbc16a92afd1a2bb88521bb2110746079efd"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204661","number":204661,"mergeCommit":{"message":"[Kibana
Overview] Shift SCSS import and lazy-load main component (#204661)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana-team/issues/1082\r\n\r\nThe purpose of
this PR is to reduce the page load bundle size of
the\r\n`kibanaOverview` plugin.\r\n\r\nConverts the main component of
the `kibanaOverview` plugin to be lazy\r\nloaded, and shifts the import
of the main SCSS file to be imported from\r\nthe lazily-loaded
component. This PR does not include any changes that\r\nwould be
noticeable by end-users. It changes the internals to use a\r\ndifferent
technology for styling components.\r\n\r\n## References\r\n1.
https://emotion.sh/docs/globals\r\n2.
https://emotion.sh/docs/best-practices\r\n3.\r\nhttps://github.com/elastic/eui/discussions/6828#discussioncomment-10825360","sha":"1861bbc16a92afd1a2bb88521bb2110746079efd"}}]}]
BACKPORT-->

Co-authored-by: Tim Sullivan <[email protected]>
mykolaharmash added a commit to mykolaharmash/kibana that referenced this pull request Jan 6, 2025
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Jan 13, 2025
…stic#204661)

## Summary

Part of elastic/kibana-team#1082

The purpose of this PR is to reduce the page load bundle size of the
`kibanaOverview` plugin.

Converts the main component of the `kibanaOverview` plugin to be lazy
loaded, and shifts the import of the main SCSS file to be imported from
the lazily-loaded component. This PR does not include any changes that
would be noticeable by end-users. It changes the internals to use a
different technology for styling components.

## References
1. https://emotion.sh/docs/globals
2. https://emotion.sh/docs/best-practices
3.
elastic/eui#6828 (comment)
@tsullivan tsullivan added technical debt Improvement of the software architecture and operational architecture Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) labels Jan 21, 2025
@elasticmachine
Copy link
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@tsullivan tsullivan deleted the remove-sass/kibana_overview branch January 23, 2025 16:55
viduni94 pushed a commit to viduni94/kibana that referenced this pull request Jan 23, 2025
…stic#204661)

## Summary

Part of elastic/kibana-team#1082

The purpose of this PR is to reduce the page load bundle size of the
`kibanaOverview` plugin.

Converts the main component of the `kibanaOverview` plugin to be lazy
loaded, and shifts the import of the main SCSS file to be imported from
the lazily-loaded component. This PR does not include any changes that
would be noticeable by end-users. It changes the internals to use a
different technology for styling components.

## References
1. https://emotion.sh/docs/globals
2. https://emotion.sh/docs/best-practices
3.
elastic/eui#6828 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) technical debt Improvement of the software architecture and operational architecture v8.18.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants