add defer / async in production bundle using angular cli 7

Question

I'm getting some performance issues in new site using angular cli 7 production in special for mobile browsers, after check I discovered the main reason for the poor performance it was missing the pre / async in my javascript bundles generated for angular cli.

I would like know if has any alternative to use angular cli 7 in order to add defer/async in the final bundles , I tried to search and I found out many alternatives for the old angular cli versions include one feature suggestion but not for the newlys versions because since the angular version 6 it not possible eject the webpack configuration and customize , add plugins , etc.

Answer 1

There are no magic solution from angular cli part, however I found out about custom builders that works well for me.

https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-object

angular-cli.json

  "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "outputPath": "dist/browser", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "polyfills": "src/polyfills.ts", "assets": [ "src/assets", "src/favicon.ico" ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/photoswipe/dist/photoswipe.css", "node_modules/photoswipe/dist/default-skin/default-skin.css", "src/styles.scss" ], "scripts": [], "customWebpackConfig": { "path": "./webpack-extra.config.js", "mergeStrategies": {"plugins": "replace"} } }, 

webpack-extra.config

 const HtmlWebpackPlugin = require('html-webpack-plugin'); const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ "template": "./src\\\\index.html", "filename": "./index.html", "hash": false, "inject": true, "compile": true, "favicon": false, "minify": { "caseSensitive": true, "collapseWhitespace": true, "keepClosingSlash": true, "removeComments": true, "removeRedundantAttributes": true }, "cache": true, "showErrors": true, "chunks": "all", "excludeChunks": [], "title": "Webpack App", "xhtml": true, "chunksSortMode": "none" }), new ScriptExtHtmlWebpackPlugin({ defaultAttribute: 'defer' }), new CompressionPlugin({ test: /\\.js(\\?.*)?$/i }) ] };