Если ваше приложение доступно непосредственно из Интернета, оптимизация активов может иметь важное значение. С помощью хорошей стратегии вы можете сократить дорогостоящий веб-трафик или увеличить скорость на некоторых мобильных или периферийных клиентах. В некоторых случаях высокооптимизированные страницы могут повысить рейтинг в поиске Google. У самого Google есть хорошая документация по оптимизации контента и тому, почему оптимизация важна.
За несколько дней до появления webpack gulp был полезной утилитой, если вы хотите создавать и оптимизировать активы. Но в 2019 году, если вы разрабатываете угловое веб-приложение, вы, возможно, будете счастливы больше не писать большие и уродливые файлы gulpfile.js.
До появления веб-пакета gulp была полезной утилитой, когда вы хотели создавать и оптимизировать активы или целые приложения. Но в 2019 году, если вы разрабатываете веб-приложение на Angular, вас может порадовать, если вам больше не придется писать большие и некрасивые файлы gulpfile.js.
Вселенная JavaScript движется быстро. Прямо сейчас, когда я пишу эту статью, веб-пакет является современным для создания новых веб-приложений независимо от того, пишете ли вы приложения без фреймворка (VanillaJS 👏) или приложения Angular.
Вселенная JavaScript развивается быстро, но эта статья о Webpack — это современный способ создания новых веб-приложений независимо от того, пишете ли вы приложения без фреймворка (VanillaJS 👏) или приложения Angular.
Webpack отлично справляется со своей работой и имеет большое сообщество. Тем не менее, оптимизация ваших ресурсов в Angular усложняется, поскольку клиент Angular просто копирует их в папку dist, как они есть.
Webpack отлично справляется со своей работой и имеет большое сообщество. Однако оптимизировать ваши активы в Angular сложно, так как клиент angular просто копирует их в папку dist как есть.
1. Добавьте пользовательскую конфигурацию Webpack
npm i -D @angular-builders/custom-webpack
Поскольку angular отбрасывает команду ng eject для настройки конфигурации веб-пакета, этот пакет дает вам возможность внедрить пользовательскую конфигурацию веб-пакета, не касаясь исходной (кстати, это выглядит более безопасным для обновления). Это также дает другие преимущества, такие как изменение index.html, и это хорошо задокументировано.
После установки этого пакета измените builders и добавьте customWebpackConfig в свой angular.json и двигайтесь дальше.
"projects": {
...
"[project]": {
...
"architect": {
...
"[architect-target]": {
"builder": "@angular-builders/custom-webpack:[browser|server|karma|dev-server]",
"options": {
"customWebpackConfig": {
"path": "webpack.config.js"
},
...
}
2. Установите плагин препроцессора Webpack
После некоторого погружения в сеть я наконец нашел плагин на github, который соответствует моим потребностям. Поскольку он выдает предупреждение об устаревании, я исправляю код, чтобы использовать новый API обработчиков компилятора веб-пакета.
npm i -D @jkroepke/webpack-file-preprocessor-plugin
После успешной установки вы можете оптимизировать свои активы прямо сейчас.
3. Создайте файл webpack.conf.js
Рядом с файлом angular.json создайте новый файл с именем webpack.conf.js. Следование примеру из пакета custom-webpack дает хорошее понимание того, как это работает.
В приведенном ниже примере показано, как настроить плагин webpack-file-preprocessor-plugin сверху:
4. Добавьте дополнительных помощников
Minify JSON — первый хороший улов. Но как насчет минимизации файлов HTML или SVG?
Вам понадобятся небольшие вспомогательные утилиты, такие как html-minifier, чтобы заархивировать его, а затем добавить WebpackFilePreprocessorPlugin во второй раз, но с другой конфигурацией:
Сделанный! — Готовый пример вы найдете здесь.
Я доволен запросами на вытягивание, чтобы узнать, как протестировать функциональность плагина. Не стесняйтесь помочь мне и пометить репо, если хотите.
