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?

[filipenevola]

No, I'm using it for years without issues.

It's something in your app.

If my suggestions above don't work I can provide a full working example for you next week. Have a good weekend.

[rodcisal]

@filipenevola Thank you very much for your help and time. Have an excellent weekend!

[paulincai]

@eugle could you please detail what this statement is based on. Thank you. https://github.com/meteor/react-tutorial/issues/25#issue-795032780

[eugle]

@paulincai You need to configure Webpack, which cannot be configured in Meteor and therefore cannot be used

[CaptainN]

If you want to do code splitting in meteor with SSR, you should use npdev:react-loadable - it's just a little tricky to set up.

[paulincai]

@paulincai You need to configure Webpack, which cannot be configured in Meteor and therefore cannot be used

Ok, I was asking what is the statement based on. Which documentation. I am asking because of mainly 2 reasons: I've been using it for a long time with no issues (only client side). And secondly, the repo does not specify you need a tie with Webpack for the client. Do you refer to it or need it in the SSR environment?

[eugle]

That's right, if you don't need an SSR, it's a great option

Unfortunately, I had to do code splitting and SSR for a long time, and I separated the front end, and I used NextJS, and everything was perfect, and I still used Meteor + Apollo on the back end,

Implementing code splitting and SSR in Meteor is still tricky, and Meteor is perfect without these requirements. I've been using it for years and will continue to use it, just by switching the front end to NextJS,

In addition, the front-end is trying to use TaroJS now, which is still the combination of TaroJS + Apollo with the back-end MeteorJS + Apollo. I will consider trying different architectures and methods to solve specific problems

[pisacode]

If you want to do code splitting in meteor with SSR, you should use npdev:react-loadable - it's just a little tricky to set up.

There is reload flicker issue with this package if you are using apollo and ssr