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.

Datos de origen

Repositorio
elastic/kibana
Última actividad en el origen
3 de agosto de 2026 a las 17:06
Idioma detectado de SKILL.md
inglés
Estrellas
21.236
Forks
8623

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Explorador de archivos
2 archivos

Mostrando SKILL.md

SKILL.md
Instrucciones de origen · Vista previa de solo lectura
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 en GitHub