Usage with code splitting

[andyfurniss4]

I have a react app which I have recently added code splitting into to try and improve performance. That helped a lot but now I have the issue which is that I have a bunch of CSS files downloading and Google PSI is telling me to "Defer Unused CSS". I was hopeful that this plugin would help with that but I'm not sure if it's intended to work with code-splitting or not.

I do want to retain my code-splitting so I'm not downloading huge JS files which is even worse than the problem I have now but when I implement HTML Critical Webpack Plugin I get a tiny bit of CSS inlined and the rest of the CSS is as it was, in the code-split chunk files.

Here is my plugin setup:

new HtmlWebpackPlugin(
  Object.assign(
    {},
    {
      inject: true,
      template: paths.appHtml,
    },
    isEnvProduction
      ? {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,
        },
      }
      : undefined
  )
),
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
new ModuleNotFoundPlugin(paths.appPath),
new webpack.DefinePlugin(env.stringified),
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
isEnvDevelopment && new CaseSensitivePathsPlugin(),
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
  filename: 'static/css/[name].[contenthash:8].css',
  chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
new HtmlCriticalWebpackPlugin({
  base: paths.appBuild,
  src: 'index.html',
  dest: 'index.html',
  inline: true,
  minify: true,
  extract: true,
  width: 1920,
  height: 940,
  penthouse: {
    blockJSRequests: false
  }
}),
...

This is from an ejected Create React App which is all still default except for the addition of HtmlCriticalWebpackPlugin.

The output I get in my is as follows:

<style>
    #root{overflow-x:hidden}body{margin:0;padding:0;font-family:sans-serif;position:relative!important;overflow:visible!important}@media only screen and (max-width:1200px){#root{overflow:visible!important}}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
</style>
<link href="/static/css/44.6e7584ab.chunk.1217e26c.css" rel="preload" as="style"
    onload="this.onload=null;this.rel='stylesheet'">
<noscript>
    <link href="/static/css/44.6e7584ab.chunk.1217e26c.css" rel="stylesheet">
</noscript>
<link href="/static/css/main.ee9b7a89.chunk.81aa0c04.css" rel="preload" as="style"
    onload="this.onload=null;this.rel='stylesheet'">
<noscript>
    <link href="/static/css/main.ee9b7a89.chunk.81aa0c04.css" rel="stylesheet">
</noscript>

I can tell you there's a heck load more styles within the top 1920x940 than what has been inlined here!

Any help would be greatly appreciated!

[thescientist13]

hmm, yeah not sure if this related to #29 , which also seems to be within the context of a SPA. I'm not sure how well critical itself support SPA, where there's only usually a root element in the HTML for index.html, and so maybe not as possible to extract what is actually "critical" in that context.