Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Shrink the page collector bundle: parse5 and preact are 92% of it

Đã đóng
  • Có gì không ổn?
#404 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@vishnuv688 đang làm issue này rồi.

Từ ngày 30/9/2026.

  • #405 của @vishnuv688 — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
25/100
Loại issue
Tái cấu trúc
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
devtools, web-dev

Hướng nghiên cứu

Start with the collector preload and the transform path in packages/app, then trace the current parseDocument round trip and vnode wire shape across the four adapters. Verify the examples and #403's headed reproduction; done means the page bundle is well under 50 KB while DOM capture, replay, and the A11y tab remain unchanged.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

enhancement

Blocks #403, where a headed Chrome 154 session hangs on the first navigation
because the collector preload is 213 KB. That bisect showed the cost is payload
size alone, superlinear per script, and that our code is not implicated: 213 KB
of comment hangs identically.

The mitigations all cost something. Chunked registration needs the source
rebuilt from string parts and evaled, which a strict script-src CSP blocks,
so it trades a headed hang for silently losing DOM capture on exactly the pages
most likely to be real applications. Fetching the collector from the backend has
the same CSP exposure, and the JS service starts no backend in trace mode. A
preload script's body bypasses page CSP; anything evaluated from a string does
not. So the only route with no downside is to register less code.

What the bundle is

bytes share
parse5 148,535 69.5%
preact / htm 47,549 22.2%
the collector itself 17,717 8.3%

Why the two big ones are there, and why they need not be

parse5 serves a round trip the page does not need. parseDocument reads
node.outerHTML, serialising the live DOM to a string, then parses that string
back into a tree. The collector is already standing in the document. Walking the
nodes directly produces the same tree without the serialize/parse pair, and is
strictly cheaper at capture time as well.

preact/htm builds vnodes the app does not consume as vnodes. transform in
packages/app reads the wire shape and calls h() itself, so the page side only
has to emit plain { type, props } objects.

Removing both takes the preload from 213 KB to roughly 18 KB, which the #403
bisect measures at baseline navigation cost.

Acceptance criteria

The page bundle registers well under 50 KB. DOM capture, replay and the A11y
tab are unchanged across all four adapters, verified on the examples rather than
by unit tests alone, since this is the fidelity-critical path. #403's headed
reproduction passes.

Size: L. The serializer is delicate and shared by every adapter, so this wants
its own verification pass rather than riding along with another change.

Ngôn ngữ chính
TypeScript
Star
10
Fork
2
Merge trung bình
1 ngày 1 giờ
Pull request đã merge (30 ngày)
23

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của webdriverio/devtools

Tất cả issue của webdriverio/devtools

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.