Lean WordPress build environment

[adamziel]

The Gutenberg plugin development demo on Stackblitz uses the @wordpress/scripts package which requires downloading 300MB of dependencies. That's fine locally, but not so great for an in-browser environment. @gziolo and I tried to make it smaller in a few different ways:

• Remove testing frameworks and linters from the dependencies, also remove any .d.ts files and alike from node_modules
  • The size got down do ~120MB
• Bundle and minify the @wordpress/scripts package
  • There's a lot of dynamic imports and it cannot be bundled with a static analyzer. Even specifying some dependencies by hand isn't enough as there is a large graph of resolve.require() calls and dynamic require() calls.
• Watch Filesystem syscalls during the build process and remove any files that weren't open or stat-ed.
  • I tried strace, fswatch, and inotifywatch in docker as well as fswatch on Mac host
  • Somehow node doesn't like that and complains about the missing files.

The only remaining option seems to be recreating that build pipeline in another tool that doesn't depend on babel, core-css, and other large libraries. It may even turn into a worthwhile contribution to @wordpress/scripts. A few options:

• Custom esbuild setup – ? MB
• https://github.com/kucrut/vite-for-wp/blob/main/package.json – just 16MB on its own but is incomplete for block development and requires additional dependencies that inflate the bundle size quickly

[adamziel]

Here's an esbuild setup that only requires downloading 6.8M of data (compressed):

https://gist.github.com/adamziel/ab4bf95756d70c1aefd1dc56fbed2c62

[adamziel]

Another challenge is a leaner @php-wasm/node package – the existing one bundles all the built .wasm PHP files and requires downloading 35 MB of data (compressed). There could be a series of packages instead, like @php-wasm/node-8-0 @php-wasm/node-8-1 etc.

[gziolo]

Here's an esbuild setup that only requires downloading 6.8M of data (compressed):

https://gist.github.com/adamziel/ab4bf95756d70c1aefd1dc56fbed2c62

That's the best path moving forward. It probably won't be easily possible to get a 100% match with start and build commands from @wordpress/scripts, but we can try to approximate it.

[danielbachhuber]

There could be a series of packages instead, like @php-wasm/node-8-0 @php-wasm/node-8-1 etc.

Could we have some mechanism for “installing” different PHP versions? I imagine such an approach will become very useful if we want to support using/testing against various patch versions.

[adamziel]

Spot on @danielbachhuber, let's link this issue with https://github.com/WordPress/wordpress-playground/issues/58. A few options:

• GitHub Actions and releases
• Nx cloud cache – if they support this feature
• ...anything else?

I'm not proposing a CDN since it's not versioned and I don't see any clear advantages over GitHub.

[adamziel]

WordPress Pull Request previewer is actually a WordPress build environment. The feedback loop isn't perfect as it takes 10-15 mins for GitHub actions to build the PR, but it is now possible to contribute without a local setup! This issue is now about speeding up that feedback loop.