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.

Informações da origem

Repositório
elastic/kibana
Última atividade na origem
3 de agosto de 2026 às 17:06
Idioma detectado do SKILL.md
inglês
Estrelas
21.236
Forks
8.623

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos
2 arquivos

Exibindo SKILL.md

SKILL.md
Instruções da origem · Visualização somente leitura
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> ```
Ver no GitHub