3 ms·

which modern JS framework offers component level lazy loading? Angular offers only route based lazy loading, which as is limited as the article pointed out.

djhalon 9y ago
There are different ways to do it based on the transpiler you use. With Webpack and dynamic imports, you could create a custom loader around the promises returned by the Webpack generation. For React, you can use React Loadable (https://github.com/jamiebuilds/react-loadable https://github.com/jamiebuilds/react-loadable) that provides a Higher Order Component and Server Side rendering.
llamafarmer 9y ago
Vue.js does https://vuejs.org/v2/guide/components-dynamic-async.html https://vuejs.org/v2/guide/components-dynamic-async.html
ngxoogler 9y ago
It isn't well documented yet but this is possible in Angular (2+). Here's a good tutorial from someone who figured it out. https://blog.angularindepth.com/dynamically-loading-components-with-angular-cli-92a3c69bcd28 https://blog.angularindepth.com/dynamically-loading-componen...
darkmarmot 9y ago
My company's framework lazy loads every component automatically by default (you can override this behavior to batches as well).
ggregoire 9y ago
https://github.com/jamiebuilds/react-loadable https://github.com/jamiebuilds/react-loadable
TheCoelacanth 9y ago
Pretty much trivial to implement in react. class Loader extends React.Component { state = { Component: null }; componentWillMount() { import('./Component').then(Component => { this.setState({ Component }); }); } render() { const { Component } = this.state; if (!Component) { return <div>Loading...</div>; } else { return <Component/>; }; } } Might want to add a few lines of error handling for production use, but that is pretty much all you need.
- xab9 9y ago
  Like the article (presentation) said it's not the best idea to do this with hundreds of components (I think he mentions latency) - in fact you "somehow" have to (should?) bundle things together and then you are back to square one or at least have to hink about pluggability/configuration again.
  - TheCoelacanth 9y ago
    Obviously you don't want to use it for every component, you put it in key places where you want lazy loading to happen.
_mrmnmly 9y ago
Vue.js has such functionality (when used with webpack & vue-router)
k__ 9y ago
https://dev.to/kayis/lazy-loaded-react-components-with-webpack-2 https://dev.to/kayis/lazy-loaded-react-components-with-webpa...

djhalon 9y ago

There are different ways to do it based on the transpiler you use. With Webpack and dynamic imports, you could create a custom loader around the promises returned by the Webpack generation. For React, you can use React Loadable (https://github.com/jamiebuilds/react-loadable https://github.com/jamiebuilds/react-loadable) that provides a Higher Order Component and Server Side rendering.

llamafarmer 9y ago

Vue.js does https://vuejs.org/v2/guide/components-dynamic-async.html https://vuejs.org/v2/guide/components-dynamic-async.html

ngxoogler 9y ago

It isn't well documented yet but this is possible in Angular (2+). Here's a good tutorial from someone who figured it out. https://blog.angularindepth.com/dynamically-loading-components-with-angular-cli-92a3c69bcd28 https://blog.angularindepth.com/dynamically-loading-componen...

darkmarmot 9y ago

My company's framework lazy loads every component automatically by default (you can override this behavior to batches as well).

ggregoire 9y ago

https://github.com/jamiebuilds/react-loadable https://github.com/jamiebuilds/react-loadable

TheCoelacanth 9y ago

Pretty much trivial to implement in react. class Loader extends React.Component { state = { Component: null }; componentWillMount() { import('./Component').then(Component => { this.setState({ Component }); }); } render() { const { Component } = this.state; if (!Component) { return <div>Loading...</div>; } else { return <Component/>; }; } } Might want to add a few lines of error handling for production use, but that is pretty much all you need.

xab9 9y ago
Like the article (presentation) said it's not the best idea to do this with hundreds of components (I think he mentions latency) - in fact you "somehow" have to (should?) bundle things together and then you are back to square one or at least have to hink about pluggability/configuration again.
- TheCoelacanth 9y ago
  Obviously you don't want to use it for every component, you put it in key places where you want lazy loading to happen.

_mrmnmly 9y ago

Vue.js has such functionality (when used with webpack & vue-router)

k__ 9y ago

https://dev.to/kayis/lazy-loaded-react-components-with-webpack-2 https://dev.to/kayis/lazy-loaded-react-components-with-webpa...