Can you increase the code splitting part, do you have such an idea #3

eugle · 2021-01-28T09:22:34Z

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

I have moved the project to this demonstration, which is very good, but I lack the function of code splitting and urgently need this function, because my project has too many files and I need SEO, and I hope that the first loading speed is fast enough. Do you see this question, do you have any ideas to increase the code splitting, take a moment to make this demonstration more powerful and perfect, I will always pay attention to this question, check it out every few hours, have you come back, poor people :)

nathanschwarz · 2021-01-28T13:27:12Z

you can use dynamic imports : https://docs.meteor.com/packages/dynamic-import.html

eugle · 2021-02-11T05:04:34Z

Can the Dynamic Imports portion be SSR

nathanschwarz · 2021-02-11T11:32:33Z

yes it will work on both server and client

eugle · 2021-02-12T08:56:13Z

I tried using dynamic imports and found that SSR didn't work
This is my code

function App(props) {
    //some code

    const [Official, setOfficial] = useState(null);
    async function ImportOfficial() {
        const dynamicImport = (await import('/imports/ui/template/official/App')).default;
        setOfficial(dynamicImport);
    }

    useEffect(() => {
        ImportOfficial().then();
    }, []);

    return (
      <div>
        {Official}
      </div>
    )
}

Indicates that all is well loaded, but if you open the source code


<body><noscript>You need to enable JavaScript to run this app.</noscript>
  | <div id="app"></div><script id='__MODULES__'>window.__APOLLO_STATE__={"ROOT_QUERY": 
 {"__typename":"Query","start({})":{"__typename":"StartResponse","code":200,"message":"success","data":

only

<div id="app"></div>

The SSR has no normal output

but，

Normal import, use

import Official from '/imports/ui/template/jimuku/App';

 //some code
return (
      <div>
        <Official/>
      </div>
    )

SSR is fine

I am the dynamic import method is wrong？What's the problem?
teach me, thank you

eugle · 2021-02-12T12:11:17Z

Sorry, I use your method, I will get an error, the error code is as follows

=> Meteor server restarted
E20210212-20:10:08.529(8) (webapp_server.js:1065) Error running template: Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

This is my code

return (
        <ErrorBoundary translation={value}>
            <GlobalContext.Provider value={value}>
                {import('/imports/ui/template/official/App').then(({default: Official}) => <Official/>)}
            </GlobalContext.Provider>
        </ErrorBoundary>
    );

nathanschwarz · 2021-02-12T12:48:50Z

My bad about the state thing, it was actually correct. Go back to your original code.
You should not use dynamic loading on the server with react component because it will send the html before finishing loading the components.
You should use a pattern like this :

function ComponentWrapper({ ...rest, Component }) {
  if (Component === null) {
     return (<div>loading...</div>  
  }
  return <Component {...rest} />
}

let IsomorphicComponent = null
if (Meteor.isServer) {
   import Whatever from 'somepath'
   IsomorphicComponent = props => <MyComponent {...props} Component={Whatever} />
} else {
  IsomorphicComponent = props => {
      const [Component, setComponent] = useState(null)
      useEffect(() => {
           import('somepath').then((c) => setComponent(c))
      }, [])
     return <ComponentWrapper {...props} Component={Component} />
   }
}

export default IsomorphicComponent

eugle · 2021-02-12T13:17:05Z

It's so complicated, I don't understand it at all, can you add this to this example?

eugle · 2021-02-12T13:34:11Z

Please, add it to Example. All it takes is for an arbitrary component to load successfully and support SSR，
My project is in a hurry to use it, and my project uses your example

eugle · 2021-02-12T14:11:13Z

I added a PR, add dynamic-import, please have a look, there is some error, help to fix and then merge, thank you very much

eugle mentioned this issue Jan 28, 2021

SSR Status meteor/meteor-feature-requests#420

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can you increase the code splitting part, do you have such an idea #3

Can you increase the code splitting part, do you have such an idea #3

eugle commented Jan 28, 2021 •

edited

Loading

nathanschwarz commented Jan 28, 2021

eugle commented Feb 11, 2021

nathanschwarz commented Feb 11, 2021

eugle commented Feb 12, 2021 •

edited

Loading

eugle commented Feb 12, 2021

nathanschwarz commented Feb 12, 2021

eugle commented Feb 12, 2021

eugle commented Feb 12, 2021

eugle commented Feb 12, 2021

Can you increase the code splitting part, do you have such an idea #3

Can you increase the code splitting part, do you have such an idea #3

Comments

eugle commented Jan 28, 2021 • edited Loading

nathanschwarz commented Jan 28, 2021

eugle commented Feb 11, 2021

nathanschwarz commented Feb 11, 2021

eugle commented Feb 12, 2021 • edited Loading

eugle commented Feb 12, 2021

nathanschwarz commented Feb 12, 2021

eugle commented Feb 12, 2021

eugle commented Feb 12, 2021

eugle commented Feb 12, 2021

eugle commented Jan 28, 2021 •

edited

Loading

eugle commented Feb 12, 2021 •

edited

Loading