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.

معلومات المصدر

المستودع
elastic/kibana
آخر نشاط في المصدر
٣ أغسطس ٢٠٢٦ في ١٧:٠٦
لغة SKILL.md المكتشفة
الإنجليزية
النجوم
٢١٬٢٣٦
التفرعات
٨٬٦٢٣

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

مستكشف الملفات
2 ملفات

عرض SKILL.md

SKILL.md
تعليمات المصدر · معاينة للقراءة فقط
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> ```
عرض على GitHub