search

electrode-io / electrode

Web applications with node.js and React
Other
2.1k stars 300 forks source link

code splitting / lazy loading support #1139

Closed chetank628 closed 4 years ago

chetank628 commented 5 years ago

I have gone through the issue there was one pr for code-splitting long back which was reverted back have anybody managed to get work code-splitting after that with this because without code-splitting building a large scale enterprise application is a pain for the user experience, if Walmart uses this in production then how you manage code splitting

Anujan commented 5 years ago

We use React.lazy with dynamic imports to do code splitting. The following babel plugins need to be added

    "@babel/plugin-syntax-dynamic-import",
    "dynamic-import-webpack",
chetank628 commented 5 years ago

We use React.lazy with dynamic imports to do code splitting. The following babel plugins need to be added

    "@babel/plugin-syntax-dynamic-import",
    "dynamic-import-webpack",

I have already tried that but ssr is not working ,only client side loading happens that too when hmr picksup, can you give me any working code snippet that would be helpful

1846689910 commented 5 years ago

Hi @chetank628 , https://reactjs.org/docs/code-splitting.html#reactlazy react lazy and Suspense is not yet available for server-side rendering. Please use @loadable/component. by installing

fyn a @babel/plugin-syntax-dynamic-import @loadable/component react-notify-toast

add plugin to your src/client/.babelrc.js:

module.exports = {
  extends: "electrode-archetype-react-app-dev/config/babel/babelrc-client.js",
  plugins: [
    "@babel/plugin-syntax-dynamic-import"
  ]
};

Then you can use @loadable/component to do dynamic import. Please refer this as an example

brandonburkett commented 5 years ago

@1846689910 Thank you! This was very helpful. Does loadable SSR work with electrode? When I run the demo via ignite, SSR shows <strong>Dynamic Imported Component is loading ...</strong>. It is working great for me on CSR.

Thanks!

1846689910 commented 5 years ago

Hi @brandonburkett Thank you. It is actually working now in only CSR, since only client-side changed. I will look into it

Bryze commented 5 years ago

@1846689910 hi, it seems the loadable feature has been shipped in https://github.com/electrode-io/electrode/pull/1240/files

But there seems to be no documentation available regarding the usage.

Would want to give this feature a try!