How to async bundles through angular CLI JSON and angular CLI JSON info

Question

Two Angular 2 angular-cli.json questions here:

after running 'ng build --prod' I can go into my index.html file in the newly created dist folder and add the 'async' attribute to the bundled script tags to keep them from being blocking. this helps with website speed but sporadically crashes the site. is there an option in the angular-cli.json that would add this for me during the build in a better way?

i ran my site through google's test my website and the only thing i have left to fix is Eliminate render-blocking JavaScript and CSS in above-the-fold content

below is a the more specific result i get from https://developers.google.com/speed/pagespeed/insights/

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 4 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Remove render-blocking JavaScript:

*****.com/inline.e93ce34d30ab58073e62.bundle.js *****.com/scripts.68b893062974958fa7b3.bundle.js *****.com/vendor.4f05ee5669648be9602e.bundle.js *****.com/main.2d50b916b073e7fba148.bundle.js Optimize CSS Delivery of the following: *****.com/styles.c9d2a891e3814f5a5ff6.bundle.css

Where is a resource for explaining every detail of how the angular-cli.json works? I'm having trouble finding good information on it.

There is an issue for this you can follow at github.com/angular/angular-cli/issues/3323 — Luke
@Luke Thanks for the info, glad to see the Angular team is at least aware of this — russiansummer

Andriy Andriy · Accepted Answer · 2017-11-15T20:33:14

You can achieve this by 'ejecting' your app and using HTML WEBPACK PLUGIN and its extension plugin script-ext-html-webpack-plugin:

run ng eject -prod. This command will expose webpack.config.js file in your root directory. (to 'uneject' your app again see my another answer)
Run npm install in order to install webpack loaders

Install two new plugins:

npm i html-webpack-plugin script-ext-html-webpack-plugin -D

In your exposed webpack.config.js file edit plugin entry and add two plugins in this order:

plugins: [
  new HtmlWebpackPlugin(),
  new ScriptExtHtmlWebpackPlugin({
    defaultAttribute: 'async'
  })
]

source

run npm run build since ng build no longer works on ejected apps. After running above command, you should get all scripts set to async within dist directory.

How to async bundles through angular CLI JSON and angular CLI JSON info

1 Answers