Optimize REPL load

[NullVoxPopuli]

Notes

• app tested is apps/repl (limber)
• webpack-using app had:
  • a completely bundled codemirror (one file)
  • used highlight.js (more optimized loading)
• vite-using app has:
  • loads all of the codemirror packages independently
  • uses shiki (more compatible highlighting, but has many files)

TODO:

• prebuild codemirror and the REPL dependencies in a library so its all one file? (aside from the await-imported stuff) -- at most there should only be one file per await import()
• see if shiki can be optimized further?
• measure this all again with an equiv template / document to render -- in vite the markdown support incidentally includes support for all supported frameworks, which may trigger more dep graph crawling

Adds perf-check.sh, and I have these results atm:

rolldown-vite

❯ du ./dist --depth 0 --apparent-size
11M ┌── dist

pnpm vite --force

| Dev Server Ready | First Paint | App Loaded | Reload after change |
| ---------------- | ----------- | ---------- | ------------------- |
| 1,036 ms         | 23,917 ms   | 25,960 ms  | 1,228 ms            |

pnpm vite

| Dev Server Ready | First Paint | App Loaded | Reload after change |
| ---------------- | ----------- | ---------- | ------------------- |
| 788 ms           | 5,448 ms    | 7,462 ms   | 1,240 ms            |

Vite

# NOTE:
#   dist: (dev + tests)
❯ du ./dist --depth 0 --apparent-size
19M ┌── dist

#   source of whole repo (no deps / dist installed)
❯ du --depth 0 --apparent-size
3.3M

pnpm vite --force

| Dev Server Ready | First Paint | App Loaded | Reload after change |
| ---------------- | ----------- | ---------- | ------------------- |
| 945 ms           | 19,526 ms   | 21,672 ms  | 1,226 ms            |

pnpm vite

| Dev Server Ready | First Paint | App Loaded | Reload after change |
| ---------------- | ----------- | ---------- | ------------------- |
| 820 ms           | 5,995 ms    | 8,086 ms   | 1,263 ms            |

Before customizing the optimizeDeps config, these were my results

# NOTE: assett sizes are the same as above

pnpm vite --force

| Dev Server Ready | First Paint | App Loaded | Reload after change |
| ---------------- | ----------- | ---------- | ------------------- |
| 841 ms           | 14,244 ms   | 31,718 ms  | 1,234 ms            |

pnpm vite

| Dev Server Ready | First Paint | App Loaded | Reload after change |
| ---------------- | ----------- | ---------- | ------------------- |
| 787 ms           | 5,631 ms    | 7,765 ms   | 1,306 ms            |

The subsequent reloads due to lazy depOptimization for the default path were silly.

Webpack (f2760ff)

modified perf-check.sh for the embroider-webpack app

See: ember-no-cache

#!/usr/bin/env bash

echo "Measuring build perf of $(basename $PWD)"

# Set LOCAL=./to/wherever/you/cloned/the/perf/code/locally
#
# Example
#
#   LOCAL=~/Development/OpenSource/build-start-rebuild-perf/bin/cli.js ./perf-check.sh
#
#   or
#
#   Local=1 ./perf-check.sh
#
#
#  (Setting to 1 means use this exact path)

TOOL="pnpm dlx build-start-rebuild-perf"

if [[ -v LOCAL ]]; then
  if [[ "$LOCAL" == "1" ]]; then
    relative="Development/OpenSource/build-start-rebuild-perf/bin/cli.js"
    LOCAL="$HOME/$relative"
    echo "Using default location of ~/$relative"
  fi

  TOOL="node $LOCAL"
fi

port="41137"

common_args="
  --timeout 180000 \
  --file ./app/app.ts \
  --wait-for 'main header nav' \
  --url 'http://localhost:$port/' \
  $@
"


with_force="
  $TOOL \
    --command 'ember-no-cache s --port $port' \
    $common_args
"

warm="
  $TOOL \
    --command 'pnpm ember s --port $port' \
    $common_args
"

echo "No Cache"

echo "Running:"
echo -e "$with_force"
eval $with_force

echo "Warm"

echo "Running:"
echo -e "$warm"
eval $warm

This is from about 9 months ago, before I converted the main app in this repo to Vite.

This can't be a direct comparison, because there the codebase is just so different now.
In particular, the REPL now supports multiple frameworks and 9 months ago it only supported Ember -- and this compounds with codemirror as well.

See: ember-no-cache

# NOTE:
#   (dev + tests)
❯ du ./dist --depth 0 --apparent-size
20M ┌── dist

#   source of whole repo (no deps / dist installed)
❯ du --depth 0 --apparent-size
3.4M

# ember-no-cache s 

| Dev Server Ready | First Paint | App Loaded | Reload after change |
| ---------------- | ----------- | ---------- | ------------------- |
| 9,234 ms         | 9,563 ms    | 10,156 ms  | 1,121 ms            |

# ember s

| Dev Server Ready | First Paint | App Loaded | Reload after change |
| ---------------- | ----------- | ---------- | ------------------- |
| 8,664 ms         | 9,008 ms    | 9,603 ms   | 1,131 ms            |

Of note, the app at this time had about 10x fewer network requests than what is on main today.

On main today, most speed gains will probably be realized via reducing the number of network requests.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

Project	Preview URL1	Manage
Limber	https://pre-optimize-vite-load.limber-glimdown.pages.dev	on Cloudflare
Tutorial	https://pre-optimize-vite-load.limber-glimmer-tutorial.pages.dev	on Cloudflare

Logs

Footnotes

1. if these branch preview links are not working, please check the logs for the commit-based preview link. There is a character limit of 28 for the branch subdomain, as well as some other heuristics, described here for the sake of implementation ease in deploy-preview.yml, that algo has been omitted. The URLs are logged in the wrangler output, but it's hard to get outputs from a matrix job. ↩