Parsely / Parsely/wp-parsely

Improve webpack bundling

Open
#2,608 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Maintenance & Fixes Refactoring wp-parsely
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.