如何通过角度CLI JSON和角度CLI JSON信息异步捆绑

Question

这里有两个Angular 2 angular-cli.json 问题：

1. 运行'ng build --prod'后，我可以进入新创建的 dist 文件夹中的 index.html 文件并添加捆绑脚本标记的'async'属性可防止其被阻止。这有助于网站速度，但偶尔会崩溃网站。 angular-cli.json中有一个选项可以在构建期间以更好的方式为我添加这个选项吗？

我通过谷歌测试我的网站运行我的网站，我唯一需要解决的问题是在首映内容中消除渲染阻止JavaScript和CSS

下面的

是我从https://developers.google.com/speed/pagespeed/insights/

获得的更具体的结果

  

消除上层内容中的渲染阻止JavaScript和CSS

     

您的页面有4个阻止脚本资源和1个阻止CSS   资源。这会导致呈现页面的延迟。没有任何一个   您可以在不等待的情况下呈现页面上的首屏内容   用于加载以下资源。尝试推迟或异步   加载阻塞资源，或内联其中的关键部分   资源直接在HTML中。删除渲染阻止JavaScript：

     

*****。com / inline.e93ce34d30ab58073e62.bundle.js   *****。com / scripts.68b893062974958fa7b3.bundle.js   *****。com / vendor.4f05ee5669648be9602e.bundle.js   *****。com / main.2d50b916b073e7fba148.bundle.js   优化CSS   交付以下内容：   *****。com / styles.c9d2a891e3814f5a5ff6.bundle.css

1. 用于解释angular-cli.json如何工作的每个细节的资源在哪里？我无法找到有关它的好信息。

Answer 1

您可以通过＆＃39;弹出＆＃39; 您的应用并使用HTML WEBPACK PLUGIN及其扩展程序插件script-ext-html-webpack-plugin来实现此目的：

1. 运行ng eject -prod。此命令将在根目录中公开 webpack.config.js 文件。 （再次查看＆＃39;您的应用再次看到我的another answer）

2. 运行npm install以安装webpack加载器

3. 安装两个新插件：

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

4. 在您公开的 webpack.config.js 文件中编辑插件条目，并按此顺序添加两个插件：

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

   source

5. 运行npm run build，因为ng build不再适用于已撤销的应用。 运行上述命令后，您应该在 dist 目录中将所有脚本设置为 async 。