Files
frontend/build-scripts
Aidan TimsonandGitHub 7f27c9a948 E2E performance improvements and consolidation (#53057)
* Run e2e suites in parallel

* Make suites run as parallel jobs in CI. Merge reports after

* Consolidate app route e2e helpers

* Move app e2e smoke data out of spec

* Tighten app e2e smoke timeouts

* Split e2e helpers by suite

* Consolidate app e2e smoke data

* Move app e2e helpers into src

* Enable workers and full paralelism to tests. Use 60% for local (4 in my case) and 1 for CI

* Shard e2e tests

* Fold e2e-local into report job

* Fix name

* Format

* Double sharding count

* Shard demo (2) and gallery (3)

* rm

* 6,4,6

* Add local sharded e2e runner

* Queue e2e benchmark runs

* Use test mode for e2e builds

* Fix e2e benchmark concurrency

* Build e2e app artifact modern only

* Build demo e2e artifact modern only

* 4/4/2 sharding

* Remove local sharded e2e runner

* Use Playwright image for e2e tests

* Remove redundant e2e test cases

* Run e2e sidebar checks concurrently

* Consolidate config link e2e checks

* Avoid duplicate gallery page waits

* Avoid slow gallery alert count wait

* Run app e2e readiness waits concurrently

* Avoid duplicate gallery readiness wait

* Restore concurrency

* Restore concurrency

* Share parallel e2e smoke registration

* Restore demo page error tracking

* Remove ineffective gallery test mode

* Remove unused route project filtering

* Remove duplicate smoke test parallel mode

* Keep page error filtering internal

* Require helper reuse in test changes

* Clarify local E2E server workflow

* Stabilize demo sidebar navigation test

* Avoid concurrent cold E2E builds

* Validate E2E worker overrides

* Restore real demo sidebar clicks

* Keep app shell error checks strict

* Limit gallery shell error filtering

* Address E2E review findings
2026-07-21 22:27:37 +02:00
..
2025-04-10 18:32:38 +02:00

Bundling Home Assistant Frontend

The Home Assistant build pipeline contains various steps to prepare a build.

  • Generating icon files to be included
  • Generating translation files to be included
  • Converting TypeScript, CSS and JSON files to JavaScript
  • Bundling
  • Minifying the files
  • Generating the HTML entrypoint files
  • Generating the service worker
  • Compressing the files

Converting files

Currently in Home Assistant we use a bundler to convert TypeScript, CSS and JSON files to JavaScript files that the browser understands.

We currently rely on Webpack. Both of these programs bundle the converted files in both production and development.

For development, bundling is optional. We just want to get the right files in the browser.

Responsibilities of the converter during development:

  • Convert TypeScript to JavaScript
  • Convert CSS to JavaScript that sets the content as the default export
  • Convert JSON to JavaScript that sets the content as the default export
  • Make sure import, dynamic import and web worker references work
    • Add extensions where missing
    • Resolve absolute package imports
  • Filter out specific imports/packages
  • Replace constants with values

In production, the following responsibilities are added:

  • Minify HTML
  • Bundle multiple imports so that the browser can fetch less files
  • Generate a second version that is ES5 compatible

Configuration for all these steps are specified in bundle.js.