[Question]Why happypack load css by async?

[NE-SmallTown]

• open sourcemap
  

• close sourcemap
  At first, when the browser download the html, there is no style tag in the head tag, so the screen just has plain html, after a few seconds, it add style to the head tag(i.e. asynchronous)

plugins:    [
    new HappyPack({
          id: 'happypack-devclient-css',
          verbose: false,
          threads: 4,
          loaders: [
            'style-loader',
            {
              path: 'css-loader',
              // Include sourcemaps for dev experience++.
              query: {
                ...cssLoaderQuery,
                sourceMap: true,
              },
            },
            'postcss-loader',
          ],
        })
]
module: {
   rules: [
      test: /\.css$/,
      include: [....],
      loaders: ['happypack/loader?id=happypack-devclient-css'],
   ]  
}

but if I don't use happypack(like below) in the module.rules, the css won't be load as async`

use: ExtractTextPlugin.extract({
   fallback: 'style-loader',
   use: [
       {
          loader: 'css-loader',
          query: {
              ...cssLoaderQuery,
              sourceMap: true,
           },
       },
       'postcss-loader',
   ],
})

So the question is, use happypack delay the time of first paint, which is a little annoying, and cause us can't use performance panel of chrome devtools(because the render process is not correct). And how to solve this, thanks :)

[amireh]

I'm fairly certain this isn't on happypack's end since this is runtime behaviour. The only thing that could be going on is that happypack isn't passing the loader options that you intend, which doesn't seem to be the case here either.

I believe this is because of your use of ExtractTextPlugin - style-loader would normally inject the styles asynchronously (take this with a grain of salt, I only very rarely used it) whereas ExtractTextPlugin doesn't use that loader and instead injects plain <style /> links into your HTML.

You have two options:

1. use extract-text with happypack
2. don't use happypack for css

For the first, there's the example and this comment that may help you out. It may be a hit-or-miss thing; it works for some people and doesn't for others, so try it and see.

Something like this possibly:

use: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: [
    'happypack/loader?id=happypack-devclient-css'
  ],
})

Let me know if that helps! Please update us when you get around to it.

[NE-SmallTown]

Thanks for your reply.

It seems that this is style-loader's fault(I guess), because even i don't use happypack and ExtractTextPlugin i.e. :

use: [
   'style-loader',
    {
      loader: 'css-loader',
      query: {
        ...cssLoaderQuery,
        sourceMap: true,
      },
    },
  'postcss-loader',
],

The css still be load as async.

after html loaded:

a few seconds, after style loaded:

And your workaround below also can't solve this:

use: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: [
    'happypack/loader?id=happypack-devclient-css'
  ],
})

it will throw window is not defined Error

And by the way, before I often used style-loader and never happen something like this（though this project is a SSR project, but I think it's irrelevant to the pack）, so I think this is also not style-loader's fault

@amireh Do you have any thoughts about this? :)

[NE-SmallTown]

Close for https://stackoverflow.com/questions/48056391/is-there-any-operation-will-cause-css-be-loaded-as-async-in-webpack