如何通過角度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及其擴展插件腳本 -ext -html -webpack-plugin來實現此目的 ：

1. run ng eject -prod 。 此命令將在根目錄中公開webpack.config.js文件。 （'再次'取消'你的應用程序看到我的另一個答案 ）

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' }) ] 

   資源

5. 運行npm run build因為ng build不再適用於彈出的應用程序。 運行上面的命令后，您應該在dist目錄中將所有腳本設置為async 。