elastic/kibana · Archived

optimize-bundle-size

Reduce plugin `page load bundle size` and avoid unnecessary increases in `packages/kbn-optimizer/limits.yml`. Use when proactively optimizing bundles, investigating CI page-load overages, or reviewing PRs that change bundle limits.

First seen May 11, 2026

Installation

$ npx skills add elastic/kibana --skill optimize-bundle-size

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from elastic/kibana · top by installs.

npx skills add elastic/kibana

Browse all from elastic/kibana

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 21.3K
License licenses
Default branch main
Status Archived

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,182 B
  • docs SUMMARY.md 259 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 4 installs

SKILL.md

Optimize Bundle Size

Use this workflow to keep limits stable by moving non-critical code out of the entry bundle.

1) Set a baseline

  1. Reference docs/extend/ci-metrics.md for metric definitions and limits workflow details.
  2. Build dist metrics for the target plugin and record current page load bundle size.
node scripts/build_kibana_platform_plugins --focus <pluginId> --dist --workers 4
cat <pluginDir>/target/public/metrics.json
  1. If this is a regression investigation, compare plugin limits on branch vs upstream.
git show upstream/main:packages/kbn-optimizer/limits.yml | rg '^\\s{2}<pluginId>:'
rg '^\\s{2}<pluginId>:' packages/kbn-optimizer/limits.yml

2) Identify entry-chunk drivers

  1. Generate a profile build.
node scripts/build_kibana_platform_plugins --focus <pluginId> --dist --profile --no-cache --workers 4
  1. Find the entry chunk id and top modules in that chunk.
entry_id=$(jq -r '.chunks[] | select((.names|index("<pluginId>")) != null) | .id' <pluginDir>/target/public/stats.json)
jq -r --argjson cid "$entry_id" '.modules[] | select((.chunks|index($cid)) != null) | [.size, (.name // .identifier)] | @tsv' <pluginDir>/target/public/stats.json | sort -nr | head -40
  1. Compare with upstream when the delta is unclear.
jq -r .modules[].id <pluginDir>/target/public/stats.json | sort - > moduleids.txt
# generate moduleids.txt on both branches and diff them
  1. Focus on modules imported by the plugin public entry/start contract.

3) Apply high-impact fixes

  1. Replace eager imports in the plugin start contract with lazy boundaries for optional UI.
  2. Avoid importing broad barrel files (index.ts) from entry paths; import only required modules directly.
  3. Split heavy UI into a separate file and load it with React.lazy(() => import(...)).
  4. Keep page load bundle size low; allow async chunks size to grow when code is not needed at initial load.

4) Re-measure and decide limits

  1. Rebuild dist metrics and compare before/after.
  2. Keep or restore the old limit if the new value is below it.
  3. Raise limits only if no meaningful split is possible, then document why.
  4. If a limit increase is required, use --update-limits (sets current size +15kb) and include findings in PR notes.
node scripts/build_kibana_platform_plugins --focus <pluginId> --update-limits

5) Validate changes

  1. Run targeted lint/type checks for touched files.
  2. Run node scripts/check_changes.ts.
  3. Optionally run --validate-limits or --dist --watch while iterating.
  4. If check_changes.ts fails due unrelated pre-existing files, call that out explicitly in PR notes.
node scripts/build_kibana_platform_plugins --validate-limits --focus <pluginId>
node scripts/build_kibana_platform_plugins --dist --watch --focus <pluginId>