Я волнуюсь, Рэй, там становится тесно, и все мои последние данные указывают на что-то большое на горизонте.
Наша команда много работала над 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 Время рисования - это время, необходимое для того, чтобы что-то впервые появилось в браузере.