Как оптимизировать приложение за счет уменьшения размера пакета
Сегодня мы активно используем JavaScript в веб-разработке, и мы можем найти множество приложений с большими размерами пакетов. Однако после определенного предела это начинает сказываться на производительности приложения.
В этой статье я расскажу о 5 методах уменьшения размера пакета JavaScript, чтобы избежать узких мест в производительности.
1. Разделение кода с помощью Webpack
Разделение кода позволяет вам разделять код на пакеты и загружать их по запросу.
Есть несколько способов реализовать разделение кода с помощью Webpack. Из них динамический импорт - один из наиболее часто используемых методов. При таком подходе вы можете легко разделить свой код в зависимости от маршрутов, используемых во внешнем интерфейсе.
Предположим, вы создаете новую платформу социальных сетей. Большую часть времени пользователи будут взаимодействовать с новостной лентой и страницей своего профиля. Итак, сначала достаточно загрузить JavaScript для этих двух страниц, а другие загружать по запросу.
Если вы используете Angular или React, разделение кода еще проще, поскольку они по умолчанию поддерживают отложенную загрузку.
В приведенном выше примере показано, как можно отложить загрузку компонентов в React, и как только вы все это определите, Webpack позаботится обо всем остальном.
Создание независимых компонентов для компоновки либо во время сборки, либо во время выполнения (с использованием динамического импорта) теперь является простой задачей.
Каждый компонент можно независимо поддерживать и даже создавать и развертывать без использования нескольких репозиториев или монорепозитория. Вместо этого используйте инструменты, предназначенные для независимых компонентов.
В приведенных ниже примерах показаны независимые компоненты, совместно используемые в Bit областях.
2. Использование плагинов Webpack для встряхивания дерева
Webpack использует граф зависимостей для создания пакетов, и этот граф состоит из каждого модуля, который мы используем в приложении. По мере роста приложения это дерево может содержать много мертвых или неиспользуемых строк кода, что приводит к проблемам с производительностью.
Встряхивание дерева - это метод, используемый для устранения мертвых кодов, и Webpack предоставляет несколько плагинов для его реализации.
1. Использование babel-plugin-lodash
Если вы используете lodash в своем приложении, вам может потребоваться этот плагин, поскольку мы не используем все вещи из lodash в нашем приложении.
Плагин babel-plugin-lodash выбирает то, что нужно импортировать из lodash. Все, что вам нужно сделать, это установить babel-plugin-lodash с помощью npm или yarn и обновить файл конфигурации Webpack следующим образом:
2. Использование babel-plugin-import
babel-plugin-import позволяет Webpack выбирать только необходимые строки кода при обходе графа зависимостей. В отличие от babel-plugin-lodash, этот плагин не ограничен lodash, и вы также можете использовать его с такими пакетами, как antd.
В дополнение к этим двум плагинам доступно множество других плагинов, и вы можете выбрать тот, который вам нужен.
3. Использование альтернативных библиотек и удаление дубликатов
Разработчику полезно измерять размеры пакетов, используемых в ваших приложениях. Это помогает легко решать проблемы с производительностью и определять пакеты, требующие оптимизации.
Анализатор пакетов Webpack обеспечивает визуализацию размеров пакетов в вашем приложении.
Использование анализатора пакетов
Вы можете использовать анализатор пакетов Webpack, импортировав его в конфигурацию Webpack как плагин или используя команды интерфейса командной строки.
Этот анализ дает четкое представление о каждой библиотеке, используемой в вашем проекте, и о том, как они влияют на размер пакета JavaScript. Кроме того, вы можете решить, нужны ли вам замены или удалить любые повторяющиеся библиотеки, обнаруженные в вашем пакете JavaScript.
4. Сжатие связок
Если размер пакета приложений увеличивается и влияет на производительность, вы можете сжать их, чтобы уменьшить размер. Gzip и Brotli - наиболее часто используемые методы сжатия, и вы можете использовать их плагины Webpack, чтобы упростить весь процесс.
Согласно исследованию CertSimple, Brotli сжимает файлы JavaScript на 14% меньше, чем Gzip.
Вы можете использовать compression-webpack-plugin для сжатия файлов с помощью технологии сжатия Gzip и brotli-webpack-plugin для сжатия с помощью Brotli. Оба этих плагина доступны в виде пакетов NPM, и вам просто нужно загрузить их и изменить конфигурацию Webpack следующим образом:
Примечание. Тем не менее, эти методы сжатия поддерживаются не всеми браузерами. Вы можете найти более подробную информацию о Gzip и Brotli в статье ниже.
5. Использование производственного режима в Webpack
Запуск вашего проекта в производственном режиме уменьшает размеры пакетов по сравнению с режимом разработки. Webpack предоставляет отдельный флаг (-p) для включения этой функции и удаляет все пробелы и символы новой строки в коде.
webpack -p --mode=productionЭто также предотвращает попадание отладочного кода в пакет и позволяет изменять код с помощью Uglify.
Заключение
Современные веб-приложения предназначены не только для разработки основных функций. Нам нужно обращать внимание на производительность, продуктивность и эффективность, чтобы получить максимальную отдачу от наших усилий.
Размер пакета JavaScript - важный фактор, влияющий на производительность приложений. К сожалению, с увеличением использования JavaScript становится непросто поддерживать пакеты меньшего размера.
Я надеюсь, что 5 пунктов, обсуждаемых в этой статье, будут вам полезны.
Спасибо за чтение !!!
