Code Splitting Example

[Vani-gurnani]

Since preact is all about smaller Java Script it would be great if you can provide functionality to support Code Split for preact-router

[developit]

It's unlikely to be a feature of preact-router itself, but I'd be happy to provide examples and recommended ways to do this. The simplest way is to use a compositional component like <SplitPoint /> as a child of the router:

<Router>
  <SplitPoint path="/" load={require('bundle?lazy!./home')} />
  <SplitPoint path="/user" load={require('bundle?lazy!./users')} />
  <SplitPoint path="/users/:user" load={require('bundle?lazy!./users/user')} />
  <SplitPoint default load={require('bundle?lazy!./not-found')} />
</Router>

[Vani-gurnani]

Thanks does preact-router support server side rendering ?

…

On Wednesday, November 30, 2016, Jason Miller ***@***.***> wrote: It's unlikely to be a feature of preact-router itself, but I'd be happy to provide examples and recommended ways to do this. The simplest way is to use a compositional component like <SplitPoint /> <https://gist.github.com/developit/9f547d32b96f879b259be399a5dc0f01> as a child of the router: <Router> <SplitPoint path="/" load={require('bundle?lazy!./home')} /> <SplitPoint path="/user" load={require('bundle?lazy!./users')} /> <SplitPoint path="/users/:user" load={require('bundle?lazy!./users/user')} /> <SplitPoint default load={require('bundle?lazy!./not-found')} /></Router> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#96 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMtHiqqkMNRpIIHPt6aJMHcA9ycjaFTOks5rDckWgaJpZM4LAgXq> .

[developit]

yup! you can pass any URL to the router and it will render the correct children accordingly:

import { h, Component } from 'preact';
import renderToString from 'preact-render-to-string';

// example app (it just needs to accept a url prop):
class MyApp extends Component {
  render({ url }) {
    return (
      <Router url={url}>
        <Home path="/" />
      </Router>
    );
  }
}

// example: express
app.get( (req, res) => {
  let html = renderToString(<MyApp url={req.url} />);
  res.send(html);
});

[Vani-gurnani]

I really liked preact-boilerplate is there a version of that with code-split and server side rendering ? That would be perfect for starting production quality apps with preact

…

On Wednesday, November 30, 2016, Jason Miller ***@***.***> wrote: yup! you can pass any URL to the router and it will render the correct children accordingly: import { h } from 'preact';import renderToString from 'preact-render-to-string'; /*// assuming you have an app defined like this:const MyApp = ({ url }) => ( <Router url={url}> <Home path="/" /> </Router>);*/ // example: expressapp.get( (req, res) => { let html = renderToString(h(MyApp, { url: req.url })); res.send(html); }); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#96 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMtHikjiUK-xfrMChDkE6LGotuabDxrFks5rDcrPgaJpZM4LAgXq> .

[developit]

There isn't one yet, but that sounds like a good idea! I don't do much server rendering since I like to deploy all my stuff to a CDN, but there are lots of people who want it. Perhaps a clone of preact-boilerplate that does SSR and shows how Code Splitting works would be ideal. The code splitting could be in both, really.

[Vani-gurnani]

Ya only reason for SSR is to support SEO Most people like me hate webpack it too much mess to set it up right specially for isomorphic apps I will try to do this and will let you know if I need help

…

On Wednesday, November 30, 2016, Jason Miller ***@***.***> wrote: There isn't one yet, but that sounds like a good idea! I don't do much server rendering since I like to deploy all my stuff to a CDN, but there are lots of people who want it. Perhaps a clone of preact-boilerplate that does SSR and shows how Code Splitting works would be ideal. The code splitting could be in both, really. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#96 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMtHii_3D4gHGsUXCaHFh2rstBvWQemVks5rDcwRgaJpZM4LAgXq> .

[MatteoWebDeveloper]

@developit I was trying to add code splitting too for js and css too.

[developit]

Code splitting for CSS is super tricky. I'm not aware of any great ways of doing that with Webpack currently. Usually you have to decide between loading all your CSS at once, or loading initial CSS but pushing less-used CSS into your lazy-loaded JavaScript modules.

[MatteoWebDeveloper]

is it for the css order issue? I was about to try the second option.

[developit]

No, I just don't know of an existing way of doing it cleanly. I guess the underlying reason would be that typically external stylesheets are created via ExtractTextPlugin in Webpack, and that plugin only supports extracting to a single external stylesheet.

[prateekbh]

Code splitting can be easily done once #135 is resolved.

[prateekbh]

for code splitting and lazyloading components please visit
https://github.com/prateekbh/preact-async-route

can we close the issue @developit

[developit]

Yup yup! Happy to close now that we have a great lib for this :)