Tải chậm React Suspense mà không có dự phòng

Question

Tôi muốn lười tải các thành phần của mình để giảm kích thước gói ban đầu và tải nhanh các thành phần bằng cách sử dụng tách mã bằng bộ định tuyến phản ứng.

Tuy nhiên, khi sử dụng React Suspense, họ buộc bạn phải sử dụng dự phòng để tải.
Điều này sẽ không hoạt động:

const lazyLoadComponent = Component =>
    props => (
        <Suspense> // Missing fallback property
            <Component {...props} />
        </Suspense>
    );

Trong trường hợp của tôi, tôi đang hiển thị html từ máy chủ nên tôi không muốn sử dụng spinner.
Điều này sẽ tạo ra một nhấp nháy vô ích trên màn hình của tôi! I E:

• Tải html
• Giá giữ chỗ xuất hiện
• PageComponent cho tuyến đường được tải
• Tôi có con quay của riêng mình để tải nguồn cấp dữ liệu từ bên trong thành phần trang

Trong trường hợp của tôi, html tương ứng với thành phần phản ứng được tải.

Có bất kỳ cách hack nào đã biết để dễ dàng giải quyết vấn đề này không (ngoại trừ việc tạo trình tải cho bất kỳ tuyến đường nào sao chép html (!!), nhân tiện, sẽ làm cho việc tải chậm trở nên vô dụng).

Tôi hơi không hài lòng với việc "buộc" chúng tôi phải thêm một bộ tải và tôi không hiểu logic đằng sau quyết định bắt buộc phải làm như vậy.

Answer 1

Cố gắng sử dụng tách mã trong tài liệu

fallbackprops chỉ là một phần tử React, bạn có thể thiết lập nó null.

<Suspense fallback={null}>
    <ComponentImportedByLazy />
</Suspense>

Answer 2

Tôi đã tạo sự cố cho vấn đề này trên Github: https://github.com/facebook/react/issues/19715

Không có giải pháp sạch hiện tại bằng React-Router / React.
Tuy nhiên, điều này được dự đoán trước trong một bản phát hành trong tương lai sử dụng chế độ đồng thời. Như Dan Abramov đã đề cập:

Về yêu cầu tính năng cụ thể của bạn, tôi nghĩ rằng tôi có thể điều chỉnh nó hơi khác một chút. Không phải là bạn muốn "dự phòng tùy chọn" vì điều đó sẽ không có ý nghĩa đối với màn hình mới (chúng tôi phải hiển thị một cái gì đó). Những gì tôi tin rằng bạn đang tìm kiếm là một cách để bỏ qua hiển thị dự phòng nếu nội dung đã ở trong HTML. Đây chính xác là cách React hoạt động trong Chế độ đồng thời để yêu cầu tính năng đã được triển khai (và cuối cùng sẽ trở thành hành vi mặc định trong một bản phát hành ổn định).

Đối với tôi không phải là vấn đề để chờ đợi, vì vậy hiện tại tôi sẽ bỏ qua việc tải các tuyến một cách lười biếng vì điều này liên quan đến một dự án theo sở thích và tôi có thời gian để chờ bản phát hành trong tương lai.