Skip to content

Improve webpack bundling #2608

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vaurdan opened this issue Jul 5, 2024 · 0 comments
Open

Improve webpack bundling #2608

vaurdan opened this issue Jul 5, 2024 · 0 comments
Labels
Maintenance Ticket/PR related to codebase maintenance tasks Refactoring Ticket/PR that is or requires a refactoring wp-parsely Required label for all issues

Comments

@vaurdan
Copy link

vaurdan commented Jul 5, 2024

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.

@vaurdan vaurdan added Maintenance Ticket/PR related to codebase maintenance tasks Refactoring Ticket/PR that is or requires a refactoring labels Jul 5, 2024
@vaurdan vaurdan added this to the Summer 2024 milestone Jul 5, 2024
@acicovic acicovic modified the milestones: Summer 2024, Future Milestone Mar 18, 2025
@acicovic acicovic added the wp-parsely Required label for all issues label Mar 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Maintenance Ticket/PR related to codebase maintenance tasks Refactoring Ticket/PR that is or requires a refactoring wp-parsely Required label for all issues
Projects
None yet
Development

No branches or pull requests

2 participants