добавьте defer / async в производственный комплект, используя angl cli 7

Question

У меня возникают некоторые проблемы с производительностью на новом сайте, использующем Angular Cli 7 Production, специально для мобильных браузеров, после проверки я обнаружил, что основной причиной низкой производительности было отсутствие pre / async в моих пакетах JavaScript, сгенерированных для Angular Cli.,

Я хотел бы знать, есть ли какая-либо альтернатива для использования anglic cli 7 для добавления defer / async в финальные пакеты, я попытался выполнить поиск и обнаружил, что многие альтернативы для старых версий angular cli включают одну функциюпредложение, но не для новых версий, поскольку начиная с угловой версии 6 невозможно извлечь конфигурацию веб-пакета и настроить его, добавить плагины и т. д.

Answer 1

Не существует волшебного решения от angular cli, однако я узнал о пользовательских сборщиках, которые хорошо мне подходят.

https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-object

angular-cli.json

  "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"              
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/photoswipe/dist/photoswipe.css",
              "node_modules/photoswipe/dist/default-skin/default-skin.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "customWebpackConfig": {
              "path": "./webpack-extra.config.js",
              "mergeStrategies": {"plugins": "replace"}             
            }
          },

webpack-extra.config

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
                 "template": "./src\\index.html",
                 "filename": "./index.html",
                 "hash": false,
                 "inject": true,
                 "compile": true,
                 "favicon": false,
                 "minify": {
                   "caseSensitive": true,
                   "collapseWhitespace": true,
                   "keepClosingSlash": true,
                   "removeComments": true,
                   "removeRedundantAttributes": true
                 },
                 "cache": true,
                 "showErrors": true,
                 "chunks": "all",
                 "excludeChunks": [],
                 "title": "Webpack App",
                 "xhtml": true,
                 "chunksSortMode": "none"
               }),
        new ScriptExtHtmlWebpackPlugin({
            defaultAttribute: 'defer'
          }),
        new CompressionPlugin({
          test: /\.js(\?.*)?$/i          
        })
    ]
};