Automattic / Automattic/wp-calypso

ETK: Improve build scripts

Open
#48,833 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

[Status] Stale [Type] Performance Editing Toolkit Enhancement Tooling
Dominant language
TypeScript
Stars
12.6k
Forks
2k
Avg merge
1d 17h
Merged PRs (30d)
552

Description

Overview

The editing toolkit plugin build scripts are kind of convoluted. This is difficult for new contributors having to add a significant amount of boilerplate which is the same for all submodules, but also results in very strange build output. Instead of one single JS/CSS bundle which is loaded and sent to clients, we create different assets for every single submodule (i.e. about 20 different script files.

Additionally, the final plugin artifact includes the unminified source code. This means that diff creation and patching is much bigger than it needs to be.

This is probably bad for performance. However, one benefit of this approach is that we can decide to load files on a granular level. For example, since dotcom-fse is rarely used, its assets are almost never loaded. On top of that, folks have been using PHP to feature gate most of their features. For example, global styles requires theme support, and only then will its assets be loaded.

@josephscott what do you think about this issue? How do we balance not loading code on a granular level vs loading multiple files? Is it generally better to load one larger file, or multiple files which, in total, are smaller?

also cc @jsnajdr @sirreal for feedback

Context

  • n/a

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 reading apps/editing-toolkit/package.json and inspecting its current build scripts and generated plugin artifact. Compare the per-submodule assets and bundled artifact, then establish the desired loading and source-inclusion behavior with maintainers; done is not defined until that tradeoff is decided.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
build-system, performance
Issue type
Refactor
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.