'Can the initial load time be canceled by multiplying React and Flutter?

Promise

This is about for web only.

Problem

Initial loading of Flutter is slow, so I'm thinking of creating a top page with React. But is this the best choice?

I Tried

ex)

  • domainroot/ -> react
  • domainroot/login -> fluttter
  • domainroot/account -> fluttter
  • domainroot/console -> fluttter
  • domainroot/eccart -> fluttter
  • domainroot/products -> fluttter

However, after all, there is a heavy load when moving from the top page to another page. Nothing has changed.

Hmmm. I wonder if I can add a function to load the Flutter page that should be moved to next in the top page created by React. Hopefully, the transition button will be active once the load is complete.

React

Is it possible to do Code Splitting like React with Flutter?

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

See Showcase

Looking at the showcase, there is no such example, and there seems to be no exception to the slow initial loading.

https://flutter.dev/showcase



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source