Chuyển đến nội dung chính

Bài đăng

Hiển thị các bài đăng có nhãn Wasm

Wasm deferred loading: split Flutter web for first paint — hướng dẫn Flutter

Wasm unlocks near-native graphics and a new packaging discipline. Bài này chuyển quan sát đó thành một mô hình nhỏ để bạn có thể kiểm thử, đo lường và giữ cho code dễ bảo trì khi app lớn lên. Vấn đề cốt lõi Opt into —wasm and —enable-wasm-deferred-loading for smaller boot bundles. Câu hỏi hữu ích không phải API hay pattern có đẹp riêng lẻ hay không, mà là state nằm ở đâu, boundary nào chịu trách nhiệm khi lỗi xảy ra, và người dùng phục hồi thế nào khi happy path biến mất. Mô hình thực tế Keep login/shell in the main module; defer admin and heavy editors. Hãy bắt đầu bằng một owner rõ ràng cho behavior. Widget chỉ nên render và phát intent; IO, persistence, permission và retry nên nằm sau một interface nhỏ. Nhờ vậy bạn có seam để fake trong test và một chỗ ghi lại các dữ kiện cần theo dõi ở production. Trong app Flutter, boundary thường có dạng: Widget phát intent như load, submit, refresh hoặc retry. Controller hoặc use case validate intent rồi gọi boundary. Boundary trả về ...

Wasm deferred loading: split Flutter web for first paint

Wasm unlocks near-native graphics and a new packaging discipline. This article turns that observation into a small implementation model you can test, measure, and keep boring when the app grows. The problem in one sentence Opt into —wasm and —enable-wasm-deferred-loading for smaller boot bundles. The useful question is not whether the API or pattern looks elegant in isolation. It is where state lives, which boundary owns failure, and how a user recovers when the happy path disappears. A practical model Keep login/shell in the main module; defer admin and heavy editors. Start with one explicit owner for the behavior. Keep widgets responsible for rendering and user intent; keep IO, persistence, permissions, and retries behind a small interface. That gives you a seam for a fake in tests and a place to record the facts that matter in production. For a Flutter app, the boundary usually looks like this: The widget emits an intent such as load, submit, refresh, or retry. A controlle...

Flutter web Wasm: deferred loading để first paint nhẹ hơn

Wasm mở khóa đồ họa gần native trên web — kèm kỷ luật đóng gói mới. Flutter 3.47 thêm deferred loading experimental cho build Wasm để tách app lớn thành module lazy. Lệnh build flutter build web --release --wasm flutter build web --release --wasm --enable-wasm-deferred-loading Điều kiện tiên quyết Rời dart:html sang package:web và JS interop hiện đại. Update package còn giả định interop chỉ dart2js. Chiến lược tách module Giữ login/shell ở module chính. Defer màn nặng (admin, editor, map). Đo time to interactive , không chỉ dung lượng tải. Cạm bẫy Library deferred không được bắt buộc ở frame đầu. UI nặng canvas/Skottie vẫn cần ngân sách asset chặt. Không phải tổ hợp browser/flag nào cũng giống nhau — test Chrome, Safari, Firefox. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Flutter web Wasm: deferred loading for smaller first paint

Wasm unlocks near-native graphics on the web — and a new packaging discipline. Flutter 3.47 adds experimental deferred loading for Wasm builds so you can split a large app into lazy modules. Build commands flutter build web --release --wasm # experimental deferred modules (main channel flag in 3.47 era) flutter build web --release --wasm --enable-wasm-deferred-loading Prerequisites Migrate off dart:html to package:web and modern JS interop. Update packages that still assume dart2js-only interop. Splitting strategy Keep login/shell in the main module. Defer heavy feature screens (admin, editors, maps). Measure time to interactive , not just download size. Pitfalls Deferred libraries must not be required during first frame. Wasm + canvas/Skottie-heavy UIs still need careful asset budgets. Not every browser/flag combination is equal — test Chrome, Safari, Firefox. Originally published on FlutterCook . Read the latest version there — that copy is the one...

Wasm deferred loading: split Flutter web for first paint

Wasm unlocks near-native graphics and a new packaging discipline. This article turns that observation into a small implementation model you can test, measure, and keep boring when the app grows. The problem in one sentence Opt into —wasm and —enable-wasm-deferred-loading for smaller boot bundles. The useful question is not whether the API or pattern looks elegant in isolation. It is where state lives, which boundary owns failure, and how a user recovers when the happy path disappears. A practical model Keep login/shell in the main module; defer admin and heavy editors. Start with one explicit owner for the behavior. Keep widgets responsible for rendering and user intent; keep IO, persistence, permissions, and retries behind a small interface. That gives you a seam for a fake in tests and a place to record the facts that matter in production. For a Flutter app, the boundary usually looks like this: The widget emits an intent such as load, submit, refresh, or retry. A controlle...

Flutter web Wasm: deferred loading để first paint nhẹ hơn

Wasm mở khóa đồ họa gần native trên web — kèm kỷ luật đóng gói mới. Flutter 3.47 thêm deferred loading experimental cho build Wasm để tách app lớn thành module lazy. Lệnh build flutter build web --release --wasm flutter build web --release --wasm --enable-wasm-deferred-loading Điều kiện tiên quyết Rời dart:html sang package:web và JS interop hiện đại. Update package còn giả định interop chỉ dart2js. Chiến lược tách module Giữ login/shell ở module chính. Defer màn nặng (admin, editor, map). Đo time to interactive , không chỉ dung lượng tải. Cạm bẫy Library deferred không được bắt buộc ở frame đầu. UI nặng canvas/Skottie vẫn cần ngân sách asset chặt. Không phải tổ hợp browser/flag nào cũng giống nhau — test Chrome, Safari, Firefox. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Flutter web Wasm: deferred loading for smaller first paint

Wasm unlocks near-native graphics on the web — and a new packaging discipline. Flutter 3.47 adds experimental deferred loading for Wasm builds so you can split a large app into lazy modules. Build commands flutter build web --release --wasm # experimental deferred modules (main channel flag in 3.47 era) flutter build web --release --wasm --enable-wasm-deferred-loading Prerequisites Migrate off dart:html to package:web and modern JS interop. Update packages that still assume dart2js-only interop. Splitting strategy Keep login/shell in the main module. Defer heavy feature screens (admin, editors, maps). Measure time to interactive , not just download size. Pitfalls Deferred libraries must not be required during first frame. Wasm + canvas/Skottie-heavy UIs still need careful asset budgets. Not every browser/flag combination is equal — test Chrome, Safari, Firefox. Originally published on FlutterCook . Read the latest version there — that copy is the one...