Lighthouse: Preload key requests

[primozs]

I hope its not too general question. Maybe somebody here knows how to solve css modules extract chunks with preload hint to the browser.

[ScriptedAlchemy]

Do you use SSR?

[primozs]

Yes i use SSR.
babel-plugin-universal-import
webpack-flush-chunks
webpack

everything latest

[ScriptedAlchemy]

Okay, check out webpack flush chunks and pretty much flush out the files, then add a preload tag to them and insert it as a string in SSR.
add the reload links to your

const preloadTags = css.map(sheet=>{
return `<link rel="preload" href="${sheet}" as="style">`
})
preloadTags.join('')

[primozs]

Ok I thought there might be some other way, that this would be automatically provided for the right candidates to flush chunks.
Thank you Zack for the answer!
Cheers

[primozs]

I must be doing something wrong, maybe my issue is similar to #125 but I don't know what was the solution there.

So I am checking the output of styles, stylesheets from flush chunks and the whole output looks like required and not a candidate for preload.

Later in the page load there is additional scripts and styles links loaded the ones visible in the screenshot that I posted.

Those styles are imported (required) in a component that is imported with universal import.

Example:

- some page (its one styles listed in flush chunks). All good until here.
  | - MapViewEdit component imported with universal component (these styles are loaded later). 

   These styles are not in flush chunks stylessheets array and it seams like candidates for preload.

const MapViewEdit = universal(
  import(
    /* webpackPreload: true */ 'seeyou-mapview/src/components/MapViewEdit'
  ),
  {
   ... conf props
  }

Is there a way to avoid this issue altogether?

[primozs]

I guess it should not be be aliased path for universal import dependency.

[seeruk]

@primozs Can you explain what you mean here? I've also run into this issue and am unsure about how to resolve it. It's exactly the scenario you've described where I have a page and it's chunks are in the flushChunks output, but it lazy loads something else and that isn't in there.

[primozs]

@seeruk Hi, I wish I could help but I really dont remember any more.