Skip to main content

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.

Source facts

Repository
elastic/kibana
Last source activity
August 3, 2026 at 17:06
Detected SKILL.md language
English
Stars
21,236
Forks
8,623

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer
2 files

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
name
optimize-bundle-size
description
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.
disable-model-invocation
true
# 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`. ```bash node scripts/build_kibana_platform_plugins --focus <pluginId> --dist --workers 4 cat <pluginDir>/target/public/metrics.json ``` 3. If this is a regression investigation, compare plugin limits on branch vs upstream. ```bash 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. ```bash node scripts/build_kibana_platform_plugins --focus <pluginId> --dist --profile --no-cache --workers 4 ``` 2. Find the entry chunk id and top modules in that chunk. ```bash 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 ``` 3. Compare with upstream when the delta is unclear. ```bash jq -r .modules[].id <pluginDir>/target/public/stats.json | sort - > moduleids.txt # generate moduleids.txt on both branches and diff them ``` 4. 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. ```bash 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. ```bash node scripts/build_kibana_platform_plugins --validate-limits --focus <pluginId> node scripts/build_kibana_platform_plugins --dist --watch --focus <pluginId> ```
View on GitHub