Add code splitting

[eugle]

The React code split

loadable-components

has dropped support for Meteor. Are there other ways to split the code? This is very important for the speed of using React, right? Why hasn't anyone mentioned this problem, or there is a better way, who would like to tell me, thank you very much

If you can include the correct code splitting scheme in the tutorial, look forward to seeing it. Thanks

[filipenevola]

Hi @eugle, sure, there is a way and it's very simple.

Just using React.lazy.

A short example, do like this in your Routes component (where your Switch lives).

import React, { lazy } from 'react';
import { Route, Switch } from 'react-router-dom';

const APIHomeContainer = React.lazy(() =>
  import('../../../infra/api/APIHomeContainer')
);

export const Routes = () => {

  return (
    <Switch>
      <Route
        exact
        path="/"
        component={props => <APIHomeContainer {...props} />}
      />
    </Switch>
  );
}

You can do this anywhere you want to have a dynamic import with React modules.

I believe this is a bit advanced for this first tutorial.

Maybe we should have a second one handling Routes, Dynamic components, etc.

What do you think?

[eugle]

As far as I know, lazy does not seem to support ssr, so packages like @loadable/component will appear, and I have used this package, it is perfect, because it needs to configure the server and webpack, it cannot be used in meteor

I used the ssr demo from the community in the project, which works perfectly, but I want to add code splitting and hope that the code can be loaded faster.

Will there be an advanced tutorial for React 2.0, which will include detailed ssr, lazy, code splitting, static routing, and will include the introduction of apollo. I am using these technologies now. I want to have a standard solution, so More conducive to learning

Is there such a plan? It sounds really difficult, but these knowledge points are really practical.

thank you for your reply ：）

[eugle]

I want to know how to use code splitting in a project with ssr enabled. As far as I know, there are several ways to achieve it.

The first is the method I currently use, with the help of npdev-react-loadable, but there is a problem. The files loaded by npdev-react-loadable are not accurate, which leads to too many and large files.

The second type, using @loadable/components, file splitting is very precise and powerful. Variables and node plugin packages can be dynamically loaded. This is the only package that can do this level. However, due to the need to configure webpack, in meteor It can’t be used, at least I don’t know how to use it.

The third one is to use import(), but I don’t know how to use it or whether it will work.

Finally, use react's lazy, but lazy does not support ssr, so give up

It is still said that Meteor itself has a way to achieve code splitting. I don’t know if the dynamic import mentioned in 1.5 can be achieved, but I have not figured it out too much. My level of technology is even disgusting by myself.

[eugle]

In fact, if someone can do a TODOS example, my requirements are actually very simple, need SSR, in order to meet the SEO and the first screen fast rendering, need to split the code, to avoid the impact of the loading speed due to too many files,

Because I'm using meteor and Apollo, so I have to combine them

Who can provide an example that includes these,

Such as
Meteor Apollo SSR example

I need this, and I've been working on it for months, but I can't make it happen
meteor apollo ssr code spliting

[rodcisal]

@filipenevola
I've done it exactly as you mentioned on your example but I'm running into this error:

I have my Route component inside a Switch component, I was wondering if should we use a Suspense component as well?

Any help would be appreciated

Thanks in advance

[filipenevola]

@rodcisal yes, you need to have somewhere above in the tree.

[rodcisal]

Thanks @filipenevola

I added a Suspense component with no luck, I'm not sure what I'm doing wrong, I'm following exactly what several examples show including yours. Here's my code:

const TermsAndConditionsComponent = React.lazy(() => {
  import('../pages/TermsAndConditions');
});

const App = () => {
  return (
    <div>
      <Suspense fallback={<span>Loading Suspense....</span>}>
        <Router>
          <div>
            <Switch>
              <Route
                exact
                path="/aceptacion-terminos-y-condiciones"
                render={() => <TermsAndConditionsComponent />}
              />
            </Switch>
          </div>
        </Router>
      </Suspense>
    </div>
  );
};

And error is still the same:

I'm on React 16.10.4 and Meteor 1.10.2

Thanks for the help!

[filipenevola]

What is the content of '../pages/TermsAndConditions'?

[rodcisal]

What is the content of '../pages/TermsAndConditions'?

Just a functional react component with a h1 tag, nothing special

[filipenevola]

How are you exporting it?

I believe React.lazy just works importing default exports.

[filipenevola]

@rodcisal also, instead of render prop of your Route use the component prop like this component={props => < TermsAndConditionsComponent {...props} />}

[rodcisal]

I'm doing:

import React from 'react';

const TermsAndConditions = () => {
  return <h1>Terms and Conditions</h1>
};

export default TermsAndConditions;

Something like that, I tried to make it work in the simplest way

[rodcisal]

@rodcisal also, instead of render prop of your Route use the component prop like this component={props => < TermsAndConditionsComponent {...props} />}

I will most definitely try that

[rodcisal]

@filipenevola do you think this might be something related to Meteor?