Preload scripts about loadable-components HOT 9 CLOSED

@neoziro I've got it working with a fork, this is enough: https://github.com/dgieselaar/loadable-components/blob/65ee245f1166a8ed0ab46760821748ce93cba79e/src/loadable.js#L116. Does it make sense?

from loadable-components.

@dgieselaar thanks for this! It looks great!

from loadable-components.

This is not possible at this time. To do it we need to couple it with Webpack. I will probably do it soon.

from loadable-components.

This is necessary if you are splitting your CSS, otherwise there will be FOUC. The <link> tag needs to be included in the server html.

from loadable-components.

+1. This feature would be VERY useful to have.

from loadable-components.

I've started thinking about moving from react-loadable to loadable-components today and I really enjoy the async rendering loadable-components provide! However, not being able to prefetch the chunks seems like a deal breaker for me. Is there any reason why you are unwilling to couple to webpack? Since loadable-components already maps the necessary modules (e.g. window.__LOADABLE_STATE__ = {"children":[{"id":"./home.page.js"}]};) it seems like a small step to know which bundles are necessary,

from loadable-components.

@ricardobrandao it is more complicated than it looks like. Actually it is just an idea and not the real name of the chunk. We need access to webpack stats in order to know which will be the final file. But I am thinking about a rewriting / simplification of Loadable Components with preload support.

from loadable-components.

FYI, here's a (gross) snippet that is working w/ my fork (use/edit at your own peril):

import fs from 'fs';
import {
  uniq,
  flattenDeep,
  pickBy,
} from 'lodash';
import getRenderedComponents from './getRenderedComponents';

const records = fs.readFileSync('records.json'); // from webpack's recordsOutputPath

const components = getRenderedComponents();

const chunks = uniq(flattenDeep(
  components.map((component) => {
    return component.modules.map((m) => {
      if (!records.chunks) {
        return [];
      }
      const chunkIds = values(pickBy(records.chunks.bySource, (value, key) => key.endsWith(` ${m}`)));
      const chunkNames =
        Object.keys(pickBy(records.chunks.byName, value => chunkIds.includes(value)));
      return chunkNames;
    });
  })
)).filter(identity);

I get the components I need to load from the route definition (I have a top-down route configuration), but once you have that, you can use this to get the assets from Webpack. Again, gross, and only works with my fork (which I would not recommend using in production unless you're me).

from loadable-components.

Loadable Components v3 has been released 🎉, and it supports <link rel="preload">!

👉 https://github.com/smooth-code/loadable-components

from loadable-components.