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.

Sign up for GitHub

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

Jump to bottom

feat(client): reduce the main bundle size #2818

Merged
merged 15 commits into from
Sep 28, 2023
Merged

feat(client): reduce the main bundle size #2818

merged 15 commits into from
Sep 28, 2023

Conversation

leafty
Copy link
Member

@leafty leafty commented Sep 27, 2023 •
edited by lorenzo-cavazzi
Loading

Fixes #2346.

Details:

  • add bundle analyzer to the build
  • use lazy loading to split the main bundle into smaller chunks

/deploy renku=auto-update/renku-ui-3.13.0 extra-values=notebooks.userSessionPersistentVolumes.enabled=true

Before this PR

File sizes after gzip:

  3.33 MB    build/main.64ee47b01494ac98219b-dev.js
  343.95 kB  build/cde265b9865f3e759bd45f752b573529.js
  59.33 kB   build/static/css/main.fe878b3d.css

After this PR

File sizes after gzip:

  970.56 kB  build/46.5b18a203683d9fa09704-dev.chunk.js
  951.45 kB  build/main.5b18a203683d9fa09704-dev.js
  722.23 kB  build/718.5b18a203683d9fa09704-dev.chunk.js
  343.95 kB  build/cde265b9865f3e759bd45f752b573529.js
  308.73 kB  build/535.5b18a203683d9fa09704-dev.chunk.js
  276.71 kB  build/901.5b18a203683d9fa09704-dev.chunk.js
  115.52 kB  build/73.5b18a203683d9fa09704-dev.chunk.js
  59.32 kB   build/static/css/main.95fd74aa.css
  1.33 kB    build/297.5b18a203683d9fa09704-dev.chunk.js
  599 B      build/575.5b18a203683d9fa09704-dev.chunk.js
  547 B      build/926.5b18a203683d9fa09704-dev.chunk.js
  494 B      build/378.5b18a203683d9fa09704-dev.chunk.js
  486 B      build/742.5b18a203683d9fa09704-dev.chunk.js
Size File Component(s) Package(s)
970.56 kB build/46.5b18a203683d9fa09704-dev.chunk.js NotebookRender react-ipynb-renderer
722.23 kB build/718.5b18a203683d9fa09704-dev.chunk.js RenkuMarkdown, MarkdownTextExcerpt mermaid, showdown, showdown-highlight, showdown-katex, he.js
308.73 kB build/535.5b18a203683d9fa09704-dev.chunk.js CodePreview highlight
276.71 kB build/901.5b18a203683d9fa09704-dev.chunk.js CKEditor @renku/ckeditor5-build-renku, @ckeditor/ckeditor5-react
115.52 kB build/73.5b18a203683d9fa09704-dev.chunk.js PDFViewer react-pdf

127 0 0 1_8888_ (3)

Lighthouse reports

Before:
image

After:
image

@leafty leafty temporarily deployed to renku-ci-ui-2818 September 27, 2023 09:38 — with GitHub Actions Inactive
@RenkuBot
Copy link
Contributor

You can access the deployment of this PR at https://renku-ci-ui-2818.dev.renku.ch

@leafty leafty temporarily deployed to renku-ci-ui-2818 September 27, 2023 09:58 — with GitHub Actions Inactive
@lorenzo-cavazzi
Copy link
Member

This fixes #2346

@leafty leafty temporarily deployed to renku-ci-ui-2818 September 27, 2023 11:37 — with GitHub Actions Inactive
@leafty leafty marked this pull request as ready for review September 27, 2023 11:37
@leafty leafty requested a review from a team as a code owner September 27, 2023 11:37
@leafty leafty temporarily deployed to renku-ci-ui-2818 September 27, 2023 12:00 — with GitHub Actions Inactive
@leafty leafty temporarily deployed to renku-ci-ui-2818 September 27, 2023 12:17 — with GitHub Actions Inactive
lorenzo-cavazzi
lorenzo-cavazzi requested changes Sep 27, 2023
View reviewed changes
Copy link
Member

@lorenzo-cavazzi lorenzo-cavazzi left a comment

Choose a reason for hiding this comment

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

Great improvement! 🙌

Some tests are failing. Feel free to remove any legacy Jest test trying to load a component in the DOM. It would be best if the same elements are tested at least once with Cypress or in Storybook

README.md Show resolved Hide resolved
@leafty
Copy link
Member Author

leafty commented Sep 27, 2023

Some tests are failing. Feel free to remove any legacy Jest test trying to load a component in the DOM. It would be best if the same elements are tested at least once with Cypress or in Storybook

  • I have no idea why this test is failing. It runs very quickly on my computer.
  • Tests like display a project render and check some of the touched components (e.g. notebook render, code render)

@leafty
remove failing tests
b1a06f4 
It seems that jest cannot deal with <Suspense> so we remove the
corresponding tests.
@leafty
Copy link
Member Author

leafty commented Sep 27, 2023

Note about the removed tests: it seems that jest tests are not working in CI/CD with . The corresponding components should be covered by Cypress tests.

@leafty leafty temporarily deployed to renku-ci-ui-2818 September 27, 2023 15:07 — with GitHub Actions Inactive
@leafty leafty temporarily deployed to renku-ci-ui-2818 September 27, 2023 16:17 — with GitHub Actions Inactive
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2818 September 27, 2023 16:24 — with GitHub Actions Inactive
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2818 September 27, 2023 17:09 — with GitHub Actions Inactive
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2818 September 27, 2023 17:34 — with GitHub Actions Inactive
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2818 September 27, 2023 20:48 — with GitHub Actions Inactive
@leafty leafty merged commit a0626ee into master Sep 28, 2023
35 of 39 checks passed
@leafty leafty deleted the leafty/exp-bundle-size branch September 28, 2023 06:42
@RenkuBot
Copy link
Contributor

Tearing down the temporary RenkuLab deplyoment for this PR.

@leafty leafty mentioned this pull request Sep 28, 2023
Closed
@lorenzo-cavazzi lorenzo-cavazzi mentioned this pull request Nov 21, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lorenzo-cavazzi lorenzo-cavazzi lorenzo-cavazzi approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Improve load time by not using a single js bundle
3 participants
@leafty @RenkuBot @lorenzo-cavazzi