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

[FrankHassanabad]

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.

• Unit or functional tests were updated or added to match the most common scenarios

[yctercero]

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

[FrankHassanabad]

🥳 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.

[yctercero]

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]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 57719a3
• Storybooks Preview
• Documentation Changes

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

• 💚 Build #125716 succeeded 4607992
• 💚 Build #125712 succeeded 9f2e9fb

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

cc @FrankHassanabad

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.