Уменьшаем количество файлов при создании проектов Angular

Быстрый ответ

1. Упрощайте начальную структуру проекта Angular с помощью команды:

   Bash

   Скопировать код

   ng new my-project --minimal

   Запустить код

2. Используйте динамическое подключение модулей для сокращения их размера:

   JS

   Скопировать код

   loadChildren: () => import('./feature.module').then(m => m.FeatureModule)

   Запустить код

3. Вручную или автоматически удаляйте лишние ресурсы при помощи команды:

   Bash

   Скопировать код

   npm prune

   Запустить код

4. Анализируйте ваш пакет, чтобы обнаружить и устранить объёмные файлы. Отлично подойдёт Webpack Bundle Analyzer:

   Bash

   Скопировать код

   npx webpack-bundle-analyzer stats.json

   Запустить код

Следуя этим шагам, вы добьётесь оптимального баланса между эффективностью и простотой вашего проекта на Angular.

Оптимизация зависимостей

Сокращайте число зависимостей, аккуратно проверив файл package.json. Лишние, возможно, являются ненужными npm-пакетами; удалите их или найдите более «лёгкие» замены.

Использование инструментов оптимизации

Минимизируйте JavaScript-файлы с помощью таких инструментов, как YUI Compressor или Google Closure Compiler. Они сокращают размер файла, удаляя пробелы и комментарии, а также сокращая названия переменных. Это улучшает производительность сети.

Переход на HTTP/2

HTTP/2 предлагает сжатие заголовков и мультиплексирование запросов, что ускоряет обработку HTTP-запросов, улучшая производительность независимо от количества файлов. Убиваем двух зайцев одним выстрелом, не так ли?

Визуализация

Angular можно сравнить с инструментарием столяра – каждый инструмент выполняет свою уникальную функцию.

🛠️  Набор: [🖼️ рамы, 🔩 винты, 🗝️ ключи, 🚪 двери, 🪟 окна]

Каждый проект Angular — это словно сокровищница:

💼  Сокровищница: [🛠️🛠️🛠️🛠️🛠️🛠️🛠️🛠️]

И каждый файл – это отдельный инструмент:

📂  Файлы: [Ключ компонентов 🛠️, Молоток модулей 🔨, Отвертка сервисов 🔧, ...]

Не бойтесь, каждый инструмент или файл в проекте – это вклад в создание замечательной работы!

🔨  Файл – это не просто элемент, это важный инструмент для создания вашего приложения.

Так что сохраняйте спокойствие и погрузитесь в кодирование! 🚀

Знакомство с процессом сборки

Отборный взгляд на процесс сборки показывает, что команда ng build --prod, опираясь на webpack, конвертирует множество файлов в несколько оптимизированных пакетов.

В борьбе за быстродействие в браузере на передний план выходят два "супергероя": Tree-shaking и Ahead-of-Time (AOT) компиляция.

• Tree-shaking: "Супергерой", который "встряхивает" проект, избавляя его от неиспользуемого кода (и не только "листья" 🍃😉).
• AOT: Выполняет компиляцию HTML и TypeScript в JavaScript ещё до загрузки приложения в браузере, сокращая время рендеринга.

Оптимизация развертывания

Когда вы готовите приложение к развертыванию, вам необходимы лишь собранные артефакты в папке dist/.

Скрипты, стили, ресурсы — все они могут быть значительно сокращены и упакованы в минимальное число файлов.

Обновление Angular

Регулярное обновление Angular CLI — залог доступа к новым оптимизациям, которые помогут сократить количество файлов и улучшить производительность. Кроме того, это улучшит безопасность и надёжность вашего приложения. Сравним это с уходом за садом! 🌷

Полезные материалы

1. Angular — Изучите структуру файлов в проекте Angular.
2. Medium — Стратегии сокращения шаблонного кода и удаления неиспользуемого кода в Angular.
3. Angular — Руководство по стилю Angular для лучших практик программирования.
4. Angular — Получите полное владение командами Angular CLI.
5. Angular — Повысьте производительность, используя динамическую подгрузку модулей в Angular.
6. GitHub – webpack-contrib/webpack-bundle-analyzer — Инструмент для визуализации и выявления объёмных файлов.
7. Angular — Подробнее о tree-shaking и устранении мертвого кода в приложениях Angular.