Any way to make app.css and app.js not block page rendering?

[xzilja]

I'm almost at 100% with page speed optimisations according to google's PageSpeed insights, just need to figure out how to resolve app.css and app.js to be non render-blocking, usually would achieve this with async script tag, but I don't see any option to edit this as it is outputted by webpack, hence am reaching out here for any sort of suggestions

[xzilja]

Tried using: https://github.com/numical/script-ext-html-webpack-plugin

webpackProd = {
    extra: {
      plugins: [
        // -- custom html-webpack-plugin options ---------------------------- //
        new ScriptExtHtmlWebpackPlugin({
          defaultAttribute: "async"
        })
      ]
    }
  };

but doesn't seem to have any effect

[insin]

That config works for me, just added this nwb.config.js alongside a standalone React thing I was playing with and built it. Are you including it in your exported config correctly?

var ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')

module.exports = {
  webpack: {
    extra: {
      plugins: [
        new ScriptExtHtmlWebpackPlugin({defaultAttribute: 'async'})
      ]
    }
  }
}

In dist/index.html:

<script type="text/javascript" src="/app.eec805e3.js" async></script></body>

[xzilja]

I re-tried, turns out I had to update something in js files for this to take effect. All working fine now :)