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

[Security Solutions][Lists] Trims down list plugin size by breaking out the exception builder into chunks by using react lazy loading #99989

Merged

Conversation

FrankHassanabad
Copy link
Contributor

@FrankHassanabad FrankHassanabad commented May 12, 2021

Summary

Trims down the list plugin size by breaking out the exception builder into a dedicated chunk by using React Suspense and React lazy loading.

Before this PR the page load bundle size was 260503, after the page load bundle size will be 194132:

You can calculate this through:

node ./scripts/build_kibana_platform_plugins --dist --focus lists
cat ./x-pack/plugins/lists/target/public/metrics.json

Before

[
  {
    "group": "@kbn/optimizer bundle module count",
    "id": "lists",
    "value": 227
  },
  {
    "group": "page load bundle size",
    "id": "lists",
    "value": 260503, <--- Very large load bundle size
    "limit": 280504,
    "limitConfigPath": "packages/kbn-optimizer/limits.yml"
  },
  {
    "group": "async chunks size",
    "id": "lists",
    "value": 0
  },
  {
    "group": "async chunk count",
    "id": "lists",
    "value": 0
  },
  {
    "group": "miscellaneous assets size",
    "id": "lists",
    "value": 0
  }
]

After:

[
  {
    "group": "@kbn/optimizer bundle module count",
    "id": "lists",
    "value": 227
  },
  {
    "group": "page load bundle size",
    "id": "lists",
    "value": 194132, <--- Not as large bundle size
    "limit": 280504,
    "limitConfigPath": "packages/kbn-optimizer/limits.yml"
  },
  {
    "group": "async chunks size",
    "id": "lists",
    "value": 70000
  },
  {
    "group": "async chunk count",
    "id": "lists",
    "value": 1
  },
  {
    "group": "miscellaneous assets size",
    "id": "lists",
    "value": 0
  }
]

Checklist

Delete any items that are not applicable to this PR.

@FrankHassanabad FrankHassanabad requested review from a team as code owners May 12, 2021 20:48
@FrankHassanabad FrankHassanabad self-assigned this May 12, 2021
@FrankHassanabad FrankHassanabad added release_note:skip Skip the PR/issue when compiling release notes v8.0.0 v7.14.0 auto-backport Deprecated - use backport:version if exact versions are needed labels May 12, 2021
@FrankHassanabad FrankHassanabad changed the title [Security Solutions][Lists] Trims down list size by breaking out the exception builder into chunks using lazy loading [Security Solutions][Lists] Trims down list plugin size by breaking out the exception builder into chunks by using react lazy loading May 12, 2021
Copy link
Contributor

@yctercero yctercero left a comment

Choose a reason for hiding this comment

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

🥳 Should the limits file also be updated to bump it down?

@FrankHassanabad
Copy link
Contributor Author

🥳 Should the limits file also be updated to bump it down?

I think so. Not with this PR, if that is ok as that triggers an operations person to take a look. We can do it as a separate standalone PR if you're fine with that.

Copy link
Contributor

@yctercero yctercero left a comment

Choose a reason for hiding this comment

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

LGTM! I pulled down and tested the builder functionality. I actually think it's smoother than the current UX for it. Confirmed what you showed me over zoom, with the lists plugin not being pulled in on initial render, just when the modal is opened.

Only question would be about updating the limits file to reflect the now smaller build size. Just saw your comment. Sounds good to do it in a separate PR.

Thanks for going through it on zoom. This was really awesome to see what difference a few changes made.

@kibanamachine
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
lists 0.0B 68.4KB +68.4KB
securitySolution 6.7MB 6.7MB -159.0B
total +68.2KB

Page load bundle

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

id before after diff
lists 254.4KB 189.6KB -64.8KB
Unknown metric groups

async chunk count

id before after diff
lists 0 1 +1

History

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

cc @FrankHassanabad

@FrankHassanabad FrankHassanabad merged commit f492fee into elastic:master May 13, 2021
@FrankHassanabad FrankHassanabad deleted the create-list-chunk-for-exception branch May 13, 2021 20:05
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request May 13, 2021
…ut the exception builder into chunks by using react lazy loading (elastic#99989)

## Summary

Trims down the list plugin size by breaking out the exception builder into a dedicated chunk by using React Suspense and React lazy loading.

Before this PR the page load bundle size was `260503`, after the page load bundle size will be `194132`:

You can calculate this through:
```ts
node ./scripts/build_kibana_platform_plugins --dist --focus lists
cat ./x-pack/plugins/lists/target/public/metrics.json
```

Before
```json
[
  {
    "group": "@kbn/optimizer bundle module count",
    "id": "lists",
    "value": 227
  },
  {
    "group": "page load bundle size",
    "id": "lists",
    "value": 260503, <--- Very large load bundle size
    "limit": 280504,
    "limitConfigPath": "packages/kbn-optimizer/limits.yml"
  },
  {
    "group": "async chunks size",
    "id": "lists",
    "value": 0
  },
  {
    "group": "async chunk count",
    "id": "lists",
    "value": 0
  },
  {
    "group": "miscellaneous assets size",
    "id": "lists",
    "value": 0
  }
]
```

After:
```json
[
  {
    "group": "@kbn/optimizer bundle module count",
    "id": "lists",
    "value": 227
  },
  {
    "group": "page load bundle size",
    "id": "lists",
    "value": 194132, <--- Not as large bundle size
    "limit": 280504,
    "limitConfigPath": "packages/kbn-optimizer/limits.yml"
  },
  {
    "group": "async chunks size",
    "id": "lists",
    "value": 70000
  },
  {
    "group": "async chunk count",
    "id": "lists",
    "value": 1
  },
  {
    "group": "miscellaneous assets size",
    "id": "lists",
    "value": 0
  }
]
```

### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
@kibanamachine
Copy link
Contributor

💚 Backport successful

Status Branch Result
7.x

This backport PR will be merged automatically after passing CI.

kibanamachine added a commit that referenced this pull request May 13, 2021
…ut the exception builder into chunks by using react lazy loading (#99989) (#100073)

## Summary

Trims down the list plugin size by breaking out the exception builder into a dedicated chunk by using React Suspense and React lazy loading.

Before this PR the page load bundle size was `260503`, after the page load bundle size will be `194132`:

You can calculate this through:
```ts
node ./scripts/build_kibana_platform_plugins --dist --focus lists
cat ./x-pack/plugins/lists/target/public/metrics.json
```

Before
```json
[
  {
    "group": "@kbn/optimizer bundle module count",
    "id": "lists",
    "value": 227
  },
  {
    "group": "page load bundle size",
    "id": "lists",
    "value": 260503, <--- Very large load bundle size
    "limit": 280504,
    "limitConfigPath": "packages/kbn-optimizer/limits.yml"
  },
  {
    "group": "async chunks size",
    "id": "lists",
    "value": 0
  },
  {
    "group": "async chunk count",
    "id": "lists",
    "value": 0
  },
  {
    "group": "miscellaneous assets size",
    "id": "lists",
    "value": 0
  }
]
```

After:
```json
[
  {
    "group": "@kbn/optimizer bundle module count",
    "id": "lists",
    "value": 227
  },
  {
    "group": "page load bundle size",
    "id": "lists",
    "value": 194132, <--- Not as large bundle size
    "limit": 280504,
    "limitConfigPath": "packages/kbn-optimizer/limits.yml"
  },
  {
    "group": "async chunks size",
    "id": "lists",
    "value": 70000
  },
  {
    "group": "async chunk count",
    "id": "lists",
    "value": 1
  },
  {
    "group": "miscellaneous assets size",
    "id": "lists",
    "value": 0
  }
]
```

### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios

Co-authored-by: Frank Hassanabad <frank.hassanabad@elastic.co>
gmmorris added a commit to chrisronline/kibana that referenced this pull request May 14, 2021
* master: (27 commits)
  Disable contextMenu when event is not event.kind=event (elastic#100027)
  Updates the monorepo-packages list (elastic#100096)
  Removes circular deps for lists in tooling and bumps down byte limit for lists (elastic#100082)
  [Security Solutions] Breaks down the io-ts packages to decrease plugin size (elastic#100058)
  fix-typo: Use of `than` instead of `then` (elastic#100030)
  [Fleet] Fix error when searching for keys whose names have spaces (elastic#100056)
  [Workplace Search] Fix bug when transitioning to personal dashboard (elastic#100061)
  [index pattern field editor] Update runtime field painless docs url (elastic#100014)
  [QA] Switch tests to use importExport - visualize (elastic#98063)
  [Canvas] Remove unused legacy autocomplete component (elastic#99215)
  Re-enable formerly flaky shareable test (elastic#98826)
  [Uptime] [Synthetics Integration] ensure that proxy url is not overwritten (elastic#99944)
  [Security Solutions][Lists] Trims down list plugin size by breaking out the exception builder into chunks by using react lazy loading (elastic#99989)
  [Uptime] Increase debounce and add immediate submit to `useQueryBar` (elastic#99675)
  chore(NA): moving @kbn/docs-utils into bazel (elastic#100051)
  [Enterprise Search] Fix SchemaFieldTypeSelect axe issues (elastic#100035)
  Remove outdated comment about schema validation not working (it does work now). (elastic#100055)
  Rename alert status OK to Recovered and fix some UX issues around disabling a rule while being in an error state (elastic#98135)
  [Fleet] Do not use async method in plugin setup|start (elastic#100033)
  Skip flaky functional test suite
  ...
yctercero pushed a commit to yctercero/kibana that referenced this pull request May 25, 2021
…ut the exception builder into chunks by using react lazy loading (elastic#99989)

## Summary

Trims down the list plugin size by breaking out the exception builder into a dedicated chunk by using React Suspense and React lazy loading.

Before this PR the page load bundle size was `260503`, after the page load bundle size will be `194132`:

You can calculate this through:
```ts
node ./scripts/build_kibana_platform_plugins --dist --focus lists
cat ./x-pack/plugins/lists/target/public/metrics.json
```

Before
```json
[
  {
    "group": "@kbn/optimizer bundle module count",
    "id": "lists",
    "value": 227
  },
  {
    "group": "page load bundle size",
    "id": "lists",
    "value": 260503, <--- Very large load bundle size
    "limit": 280504,
    "limitConfigPath": "packages/kbn-optimizer/limits.yml"
  },
  {
    "group": "async chunks size",
    "id": "lists",
    "value": 0
  },
  {
    "group": "async chunk count",
    "id": "lists",
    "value": 0
  },
  {
    "group": "miscellaneous assets size",
    "id": "lists",
    "value": 0
  }
]
```

After:
```json
[
  {
    "group": "@kbn/optimizer bundle module count",
    "id": "lists",
    "value": 227
  },
  {
    "group": "page load bundle size",
    "id": "lists",
    "value": 194132, <--- Not as large bundle size
    "limit": 280504,
    "limitConfigPath": "packages/kbn-optimizer/limits.yml"
  },
  {
    "group": "async chunks size",
    "id": "lists",
    "value": 70000
  },
  {
    "group": "async chunk count",
    "id": "lists",
    "value": 1
  },
  {
    "group": "miscellaneous assets size",
    "id": "lists",
    "value": 0
  }
]
```

### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auto-backport Deprecated - use backport:version if exact versions are needed release_note:skip Skip the PR/issue when compiling release notes v7.14.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants