Как асинхронные пакеты через angular CLI JSON и angular CLI JSON info

Два вопроса Angular 2 angular -cli.json:

  • после запуска 'ng build --prod' Я могу войти в мой файл index.html во вновь созданной папке dist и добавить атрибут 'async' для связанных тегов script, чтобы они не блокировались. это помогает с скоростью веб-сайта, но спорадически сбой сайта. есть ли опция в angular -cli.json, которая добавит это для меня во время сборки лучше?

Я запустил мой сайт с помощью Google Analytics на своем веб-сайте, и единственное, что я оставил для исправления, - это Устранить блокирование рендеринга JavaScript и CSS в надстрочном контенте

ниже - более конкретный результат, который я получаю от https://developers.google.com/speed/pagespeed/insights/

Устранить блокирование визуализации JavaScript и CSS в вышеприведенном содержании

На вашей странице есть 4 блокирующих ресурса script и 1 блокировка CSS Ресурсы. Это приводит к задержке в рендеринге вашей страницы. Ни один из над содержимым на странице может быть отображено без ожидания для загрузки следующих ресурсов. Попробуйте отложить или асинхронно ресурсов блокировки нагрузки или встроенных критических частей этих ресурсов непосредственно в HTML. Удалить визуализацию с помощью JavaScript:

*****. Ком /inline.e93ce34d30ab58073e62.bundle.js *****. Ком /scripts.68b893062974958fa7b3.bundle.js *****. Ком /vendor.4f05ee5669648be9602e.bundle.js *****. Ком /main.2d50b916b073e7fba148.bundle.js Оптимизировать CSS Поставка: *****. COM/styles.c9d2a891e3814f5a5ff6.bundle.css

  1. Где ресурс для объяснения каждой детали того, как работает angular -cli.json? У меня возникли проблемы с поиском хорошей информации.

Ответы

Ответ 1

Вы можете добиться этого путем "извлечения" своего приложения и с помощью HTML WEBPACK PLUGIN и его плагина расширения script-ext-html-webpack-plugin:

  • запустите ng eject -prod. Эта команда откроет файл webpack.config.js в корневом каталоге. (чтобы "отменить" ваше приложение снова увидеть мой еще один ответ)

  • Запустите npm install, чтобы установить загрузчики веб-пакетов

  • Установите два новых плагина:

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

  • В открывшемся файле webpack.config.js редактируйте файл плагина и добавьте два плагина в следующем порядке:

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

    источник

  • запустите npm run build, так как ng build больше не работает с выгруженными приложениями. После выполнения над командой вы должны получить все сценарии, установленные для async в каталоге dist.