perf: lazy-load AI Content Planner from the block editor#23214
Open
enricobattocchi wants to merge 1 commit intorelease/27.6from
Open
perf: lazy-load AI Content Planner from the block editor#23214enricobattocchi wants to merge 1 commit intorelease/27.6from
enricobattocchi wants to merge 1 commit intorelease/27.6from
Conversation
The 27.6 release pushed the plugin zip past the 5 MB mark. The dominant cause was the AI Content Planner module being bundled twice: * statically imported from packages/js/src/initializers/block-editor-integration.js and the Sidebar/Metabox fills, so it landed in block-editor.js (+161 KB raw / +28 KB gzipped); * shipped a second time as the standalone js/dist/ai-content-planner.js entry (~177 KB raw / 54 KB gzipped). That bundle's initialize.js only exports initContentPlanner() and never self-bootstraps, so on Elementor and classic-editor pages — where the standalone bundle was the only one enqueued — the planner UI never actually mounted. The bundle was dead weight there. Convert the three import sites to dynamic import() / React.lazy + Suspense under a single webpackChunkName, then drop the standalone webpack entry and localize wpseoContentPlanner onto block-editor instead. The Elementor enqueue hook is removed too: it was only ever shipping the dead-weight bundle. Net js/dist gzipped delta vs 27.6: -25.8 KiB. The planner code now ships once, on demand, and block-editor.js is ~28 KiB gzipped lighter for users without the AI feature enabled. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Coverage Report for CI Build 29Warning Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes. Coverage decreased (-1.7%) to 51.724%Details
Uncovered Changes
Coverage Regressions3 previously-covered lines in 2 files lost coverage.
Coverage Stats💛 - Coveralls |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
block-editor.js(+161 KB raw / +28 KB gzipped) and shipped as a separate standaloneai-content-planner.jsentry (~177 KB raw / 54 KB gzipped).initialize.jsonly exportsinitContentPlanner()and never invokes it — so on Elementor and classic-editor pages, where the standalone bundle was the only enqueue path, the planner UI never actually mounted. The bundle was effectively dead weight. The Block Editor flow worked becauseblock-editor-integration.jsseparately callsinitContentPlanner().webpackChunkName, removes the redundant standalone entry, and rewires the PHP integration to localizewpseoContentPlanneronto the block-editor handle.Summary
This PR can be summarized in the following changelog entry:
Relevant technical choices:
block-editor-integration.jsnow uses dynamicimport()to loadai-content-planner/initializeonly whengetIsAiFeatureEnabled()is true; both fills (SidebarFill.js,MetaboxFill.js) useReact.lazy+SuspenseforContentPlannerEditorItem. All three call sites share the samewebpackChunkName: "ai-content-planner-editor"so webpack emits a single async chunk.import(),React.lazyandSuspenseare first-uses in this codebase. Webpack 5'soutput.publicPath: "auto"resolves the chunk URL fromdocument.currentScript.srcat runtime, which matches our/wp-content/plugins/wordpress-seo/js/dist/layout.ai-content-plannerwebpack entry is dropped fromconfig/webpack/paths.js. The script handle disappears from the regeneratedsrc/generated/assets/plugin.phpautomatically (the asset manager auto-registers from that manifest).Content_Planner_Integration::enqueue_assetsnow localizeswpseoContentPlanneronto theblock-editorhandle (which lazy-loads the planner). Theelementor/editor/before_enqueue_scriptshook is removed: it was only enqueuing the dead-weight bundle. If/when the planner is wanted in Elementor, the right pattern is the AI generator one — adomReady(() => init…())self-bootstrap insideinitialize.jsplus an Elementor mount path inside the React tree.js/dist/size delta vs 27.6 (gzip-9, summed across all files): -25.8 KiB.block-editor.jsraw: 368 KB → 264 KB (-104 KB raw / -28 KB gzipped). The new async chunk is ~91 KB raw / 23 KB gzipped, plus a small ~6 KB shared helper.Test instructions
Test instructions for the acceptance test before the PR gets merged
This PR can be acceptance tested by following these steps:
yarn buildorgrunt build).js/dist/ai-content-planner.jsno longer exists, butjs/dist/ai-content-planner-editor.jsdoes (along with a small numbered chunk like833.js).block-editor.jsloads, thenai-content-planner-editor.jsis fetched on demand shortly after (deferred chunk).block-editor.jsloads butai-content-planner-editor.jsis not fetched.ai-content-planner*.jsfile is requested.Relevant test scenarios
ChunkLoadError, 404 onai-content-planner-editor.js, etc.) — this is the first use of webpack code-splitting in the plugin.import()is supported across all browsers we already target, but a quick sanity check on Chrome / Firefox / Safari is worthwhile because this is a new pattern in our build.Test instructions for QA when the code is in the RC
Impact check
This PR affects the following parts of the plugin, which may require extra testing:
packages/js/src/initializers/block-editor-integration.jsand its sidebar/metabox fills) — the AI Content Planner UI is now loaded asynchronously instead of synchronously.WPSEO_Admin_Asset_Manager's registered script handles — theai-content-plannerhandle is removed (auto, via the regeneratedsrc/generated/assets/plugin.phpmanifest).Content_Planner_Integration::enqueue_assets— now localizes ontoblock-editorinstead ofai-content-planner. Behaviour in the Block Editor is unchanged; behaviour in Elementor / classic-editor changes from "ship 177 KB of dead-weight JS" to "ship nothing", which is what was already happening at the user-experience level (no UI ever mounted there).Other environments
[shopify-seo], added test instructions for Shopify and attached theShopifylabel to this PR.[yoast-doc-extension], added test instructions for Yoast SEO for Google Docs and attached theGoogle Docs Add-onlabel to this PR.Documentation
Quality assurance
grunt build:imagesand committed the results, if my PR introduces or edits images or SVGs.Innovation
innovationlabel.Fixes #
Local checks status (run before opening this PR):
composer check-branch-cs✅ (1 file checked, no errors)composer lint-branch✅ (1 file checked, no syntax errors)composer test✅ (4973 tests, 26234 assertions, all pass)yarn lint✅ inpackages/js(3 errors / 43 warnings — same as trunk baseline; no new errors or warnings introduced)yarn test✅ inpackages/js(1380 tests across 155 suites, all pass)composer test-wp-envwp-env, not available in this environment) — disclosed for QA awarenessimport()/React.lazyfor the first time in this codebase. CI plus QA acceptance testing should validate chunk-loading in Block Editor / Elementor / Classic editor before merge.