3 способа уменьшить бандл в webpack

3 способа уменьшить бандл в webpack

От автора: в webpack вас больше всего волнует производительность? Размер бандла слишком большой? Тогда этот пост для вас! Пройдите эти три этапа, чтобы иметь представление о том, как оптимизировать размер бандла. Этапы перечислены по возрастающей сложности, чтобы вы могли начать с верхнего и, надеюсь, быстро его выполнить.

Просто: запустите webpack в продакшене

Проверьте, что webpack запущен в режиме продакшена. Для этого необходимо запустить webpack с флагом –p:

webpack –p

Этот маленький флаг выполняет две операции для оптимизации размера бандла:

Активирует минификацию с помощью UglifyJs. Удаляются ненужные пробелы, пустые строки, недостижимый код и т.д.

Устанавливает NODE_ENV в значение «production». Значение говорит пакетам типа React не включать дебаг код.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Средняя сложность: используйте анализатор

В сети полно хороших анализаторов бандлов. Лучшие, которые я использовал:

Они работают немного по-разному, но в итоге получается то же самое: красивое визуальное представление всех модулей бандла. Результат от source-map-explorer выглядит так (изображение с GitHub):

3 способа уменьшить бандл в webpack

Визуализация позволяет увидеть, что есть в вашем бандле. Можно сравнить размеры компонентов и зависимостей. Как анализировать выходные данные:

Зависимости больше, чем вы думали? Можно ли их заменить минималистичными/более специализированными альтернативами или переписать самому?

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Вы используете moment.js, в бандле все часовые пояса, но используется один или два? Это можно пофиксить.

Используете lodash? Тогда попробуйте lodash-webpack-plugin и/или babel-plugin-lodash.

Имеет смысл разбить бандл, чтобы не все компоненты и зависимости загружались на всех страницах? Тогда читайте дальше.

Тяжело: разбивайте код

Разбить код — разбить бандл на маленькие части. Вы можете спросить: «Зачем кому-то делать это? Разве это не плохо сказывается на мобильных устройствах?». Чтобы повысить производительность на мобильных устройствах, необходимо уменьшить количество новых HTTP-соединений, это правда. Но плюс разбивки кода в том, что так можно больше задействовать кэш и делать более специализированные бандлы.

Разбивка библиотек на отдельные бандлы

Зависимости обычно не так часто меняются, как продакшен код. С помощью разбивки кода зависимости можно вынести в отдельный бандл. Этот бандл можно скормить в кэш браузера на большее время, чем код продакшена.

По ссылке можно почитать хорошее руководство. Также должен помочь мой пост о то, что делать с файлами бандла.

Разбивка CSS-кода

Используете CSS в JS? Тогда CSS можно вынести в отдельный JS-бандл или CSS-файл. Плюс такой же, как и с библиотеками: браузер может кэшировать такие файлы на более долгий период.

Заинтересовала тема? Читайте руководство.

Асинхронное получение бандлов

С помощью webpack один бандл можно разбить на много маленьких, после чего браузер можно автоматически асинхронно вытягивать необходимые бандлы. Это значит, что браузер будет загружать только необходимый JS-код. Это крутой, но самый сложный метод из этого поста. Смотрите руководство.

Заключение

Чтобы оптимизировать размер бандлов, можно выполнить множество операций. Что-то делается быстро, что-то занимает больше времени.

Определенно стоит обратить внимание на более простые этапы оптимизации в webpack. Проработав первые два этапа из поста, вы можете сильно сократить вес файлов, потратив на это всего лишь 30 минут.

Источник: http://blog.jakoblind.no/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Webpack. Основы

Прямо сейчас посмотрите курс по Webpack!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree