Skip to content
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

Improve webpack bundling #2608

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
Type: Maintenance Type: Refactoring Items that result directly or indirectly in refactoring
Milestone

Comments

@vaurdan
Copy link
Contributor

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 Type: Maintenance Type: Refactoring Items that result directly or indirectly in refactoring labels Jul 5, 2024
@vaurdan vaurdan added this to the Summer 2024 milestone Jul 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Maintenance Type: Refactoring Items that result directly or indirectly in refactoring
Projects
None yet
Development

No branches or pull requests

1 participant