Я волнуюсь, Рэй, там становится тесно, и все мои последние данные указывают на что-то большое на горизонте.

Наша команда много работала над Font Awesome 5. На момент написания этой статьи мы завершили 96% преобразование значков старой версии 4. Мы добавили совершенно новые стили: Обычный и Легкий. Есть множество новых значков брендов и новых функций, таких как SVG Framework и Power Transforms.

Мы получили много положительных отзывов, но кое-что привлекло мое внимание, когда я просматривал ветку проблем в нашем частном репозитории Font-Awesome-Pro на GitHub.

Чтобы сделать работу с SVG частью <i class=”fa fa-cake”></i>, наша новая структура использует JavaScript. Мы сосредоточились на добавлении функций и не тратили время на оптимизацию производительности или размера файла. Начиная с бета-версии 2, основной файл вырос до неприлично большого размера.

Частично это сделано намеренно. Мы не хотим тратить время на оптимизацию чего-то, что, как мы не уверены, закрепится или будет переписано.

Но 66кб…

Насколько велик Font Awesome 4?

В версии 4 у вас часто есть два разных файла, которые необходимо загрузить, чтобы она работала.

  • 30 КБ css / fontawesome.min.css
  • 96 КБ fonts / fontawesome-webfont.woff

С самого начала мы наблюдали за размером файла CSS 30 КБ. Наш новый файл JavaScript - да, эта версия 66 КБ - включает CSS. С самого начала мы придерживались такой мысли:

«Эй, разве не было бы круто, если бы весь фреймворк JavaScript был примерно того же размера, что и старый CSS-файл размером 30 КБ?»

Мы перешли с 66 КБ на 22 КБ

Первым шагом было удаление Lodash и использование некоторых дополнений функционального программирования из fast.js. Lodash - надежная библиотека, но нам не понадобилась вся эта мощь. Новый размер 48 КБ.

🤓 Затем мы удалили использование некоторых функций ES6, таких как деструктуризация массива. Это имеет значение, потому что нашему инструменту сборки Babel.js и Rollup.js не нужно включать дополнительные функции, чтобы он работал в браузерах ES5.

const [width, height, _ligature, _unicode, vectorData] = icon

Стал:

const width = icon[0]
const height = icon[1]
const vectorData = icon[4]

Уменьшено до 33 КБ.

Затем мы свернули встроенный CSS и использовали некоторые дополнительные параметры сжатия и искажения в UglifyJS.

uglifyjs dist/js/fontawesome.js \
  -c -m --toplevel -o dist/js/fontawesome.min.js

Уменьшился до 22 КБ. Это неплохо.

Что дальше

Font Awesome 5 Pro включает 2 новых стиля: Обычный и Светлый. Вы можете перейти на https://fontawesome.com, чтобы ознакомиться с некоторыми примерами. Эти несжатые пакеты по-прежнему довольно велики по сравнению со сжатыми WOFF и WOFF2, сжатыми Brotli.

Одна из наших сложных задач на нашем Kickstarter заключалась в том, чтобы включить поднабор, который сократил бы ваши пакеты только до значков, которые вы используете.

Мы также недавно включили универсальные / изоморфные пакеты Javascript, которые совместимы с node.js и npm. Если у вас есть лицензия Font Awesome 5 Pro, вы можете загрузить последнюю бета-версию и использовать ее сегодня. Что хорошо в этом, так это то, что разбиение на подмножества может быть достигнуто с помощью Tree Shaking, который поддерживается в Webpack 2.0 и Rollup.js. Вы импортируете и используете только те значки, которые вам нужны.

По мере приближения к финальному выпуску версии 5 мы проведем сравнение результатов размера файла и времени рисования (1) по принципу «яблоко с яблоком».

👉🏻 Предзаказ Font Awesome Pro.

1 Время рисования - это время, необходимое для того, чтобы что-то впервые появилось в браузере.