От автора: в webpack вас больше всего волнует производительность? Размер бандла слишком большой? Тогда этот пост для вас! Пройдите эти три этапа, чтобы иметь представление о том, как оптимизировать размер бандла. Этапы перечислены по возрастающей сложности, чтобы вы могли начать с верхнего и, надеюсь, быстро его выполнить.
Просто: запустите webpack в продакшене
Проверьте, что webpack запущен в режиме продакшена. Для этого необходимо запустить webpack с флагом –p:
|
1 |
webpack –p |
Этот маленький флаг выполняет две операции для оптимизации размера бандла:
Активирует минификацию с помощью UglifyJs. Удаляются ненужные пробелы, пустые строки, недостижимый код и т.д.
Устанавливает NODE_ENV в значение «production». Значение говорит пакетам типа React не включать дебаг код.
Средняя сложность: используйте анализатор
В сети полно хороших анализаторов бандлов. Лучшие, которые я использовал:
Они работают немного по-разному, но в итоге получается то же самое: красивое визуальное представление всех модулей бандла. Результат от source-map-explorer выглядит так (изображение с GitHub):
Визуализация позволяет увидеть, что есть в вашем бандле. Можно сравнить размеры компонентов и зависимостей. Как анализировать выходные данные:
Зависимости больше, чем вы думали? Можно ли их заменить минималистичными/более специализированными альтернативами или переписать самому?
Вы используете moment.js, в бандле все часовые пояса, но используется один или два? Это можно пофиксить.
Используете lodash? Тогда попробуйте lodash-webpack-plugin и/или babel-plugin-lodash.
Имеет смысл разбить бандл, чтобы не все компоненты и зависимости загружались на всех страницах? Тогда читайте дальше.
Тяжело: разбивайте код
Разбить код — разбить бандл на маленькие части. Вы можете спросить: «Зачем кому-то делать это? Разве это не плохо сказывается на мобильных устройствах?». Чтобы повысить производительность на мобильных устройствах, необходимо уменьшить количество новых HTTP-соединений, это правда. Но плюс разбивки кода в том, что так можно больше задействовать кэш и делать более специализированные бандлы.
Разбивка библиотек на отдельные бандлы
Зависимости обычно не так часто меняются, как продакшен код. С помощью разбивки кода зависимости можно вынести в отдельный бандл. Этот бандл можно скормить в кэш браузера на большее время, чем код продакшена.
По ссылке можно почитать хорошее руководство. Также должен помочь мой пост о то, что делать с файлами бандла.
Разбивка CSS-кода
Используете CSS в JS? Тогда CSS можно вынести в отдельный JS-бандл или CSS-файл. Плюс такой же, как и с библиотеками: браузер может кэшировать такие файлы на более долгий период.
Заинтересовала тема? Читайте руководство.
Асинхронное получение бандлов
С помощью webpack один бандл можно разбить на много маленьких, после чего браузер можно автоматически асинхронно вытягивать необходимые бандлы. Это значит, что браузер будет загружать только необходимый JS-код. Это крутой, но самый сложный метод из этого поста. Смотрите руководство.
Заключение
Чтобы оптимизировать размер бандлов, можно выполнить множество операций. Что-то делается быстро, что-то занимает больше времени.
Определенно стоит обратить внимание на более простые этапы оптимизации в webpack. Проработав первые два этапа из поста, вы можете сильно сократить вес файлов, потратив на это всего лишь 30 минут.
Источник: //blog.jakoblind.no/
Редакция: Команда webformyself.
