angular - 如何通过 Angular CLI JSON 和 Angular 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/ 得到的更具体的结果

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

1. 解释 angular-cli.json 工作原理的每个细节的资源在哪里？我很难找到有关它的有用信息。

Answer 1

您可以通过“弹出”您的应用并使用 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。