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.
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.
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.jsanddashboard-widget.jsfor 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.