如何通过角度 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

您可以通过'ejecting'您的应用并使用HTML WEBPACK PLUGIN 及其扩展插件script-ext-html-webpack-plugin 来实现此目的：

1. 运行ng eject -prod。此命令将在您的根目录中公开 webpack.config.js 文件。 （要再次“取消拒绝”您的应用，请参阅我的another answer）

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

3. 安装两个新插件：

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

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

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

   source

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