Improve webpack bundling
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 66
- Forks
- 36
- Avg merge
- 2d 2h
- Merged PRs (30d)
- 16
Description
Is your feature request related to a problem?
After the introduction of the new Smart Linking interface, when building the project with webpack, we get a particular warning regarding the bundle size.
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
content-helper/editor-sidebar (249 KiB)
content-helper/editor-sidebar.css
content-helper/editor-sidebar.js
content-helper/editor-sidebar-rtl.css
content-helper/editor-sidebar.asset.php
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Describe the solution you'd like
Improve the resulting bundle. Ideally, we should be able to break each individual feature into its own bundle, and enqueue the JS file each time is needed. This would also prevent loading, for example, the Smart Linking JS code when this feature is actually disabled.
This might require breaking each individual feature into an individual package and have the build script take care of those, similarly with what Gutenberg core does with its components. But I would need to do a deeper research on how that works.
Describe alternatives you've considered
Another alternative would be looking into reducing the bundle size by avoiding repeated code. One good example is the Telemetry module that is used everywhere, and it's bundled with both the editor-sidebar.js and dashboard-widget.js for example. If we could externalize this module and use it without including it in the bundle, it would save some space in the final bundle, solving the warning.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inspecting the webpack build script and the entrypoints producing content-helper/editor-sidebar.js and dashboard-widget.js. Compare how Smart Linking and the Telemetry module are bundled, then research the existing Gutenberg-style package approach. Done means smaller feature-specific bundles, disabled features are not loaded, and the reported webpack size warning is resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- build-system, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100