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

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

Answer 1

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

1. 跑ng eject -prod。此命令将在您的根目录中公开webpack.config.js文件。（要再次“取消”您的应用程序，请参阅我的另一个答案）

2. 运行npm install以安装 webpack loader

3. 安装两个新插件：

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

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

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

   来源

5. 运行，npm run build因为ng build不再适用于弹出的应用程序。上面的命令运行后，你应该设置为所有脚本异步内DIST目录。