HTML-кнопки стали слишком дорогими

Итак, вы решили создать одностраничное приложение всего с одной кнопкой, используя Angular, React или Vue и некоторую библиотеку компонентов пользовательского интерфейса. Звучит здорово! Давай сделаем это дерьмо.

Но есть проблема. Добавление одной кнопки на страницу может оказаться намного дороже, чем вы думаете. Попробовав некоторые из самых популярных библиотек компонентов, я был удивлен тем, насколько может увеличиться мой окончательный размер пакета.

Реагировать

Размер пакета Hello world js для самой реакции составляет 37,3 КБ ( минимизированный + сжатый с помощью gzip). Я использую приложение create-react-app, поэтому настраиваемая сборка отсутствует.

Муравей Дизайн

Начнем с https://ant.design, популярной библиотеки компонентов пользовательского интерфейса, чтобы добавить одну кнопку на страницу.

@import '~antd/dist/antd.css';
import Button from 'antd/lib/button';
const App = () => <Button type="primary">Ant Design</Button>

После сборки производственной сборки мы получаем дополнительные 170 КБ js + 52,8 КБ css. Это безумие, правда? Вы сразу видите, что что-то не так, и это действительно так. Существует нерешенная проблема https://github.com/ant-design/ant-design/issues/12011 для включения всех значков в окончательный пакет, а встряхивание дерева вообще не работает.

Материал UI

Хорошо, с первой библиотекой не повезло. Давайте попробуем https://material-ui.com - одну из самых популярных библиотек для React.

import Button from '@material-ui/core/Button';
const App = () => <Button color="primary">Material UI</Button>

После создания производственной сборки мы получаем дополнительно 28 КБ js, что почти то же самое, что и повторное добавление React. Для сравнения, размер всего пакета css фреймворка начальной загрузки составляет всего 22 КБ. Конечно, это намного лучше, чем дизайн муравьев и тряска деревьев, кажется, работают, но это все равно довольно плохо. После проверки кода на https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Button/Button.js#L313 можно увидеть, что компонент кнопки 313 строк кода + дополнительный импорт, помощники и стили CSS.

Бутстрап

Давайте попробуем React Bootstrap https://react-bootstrap.github.io.

import Button from 'react-bootstrap/Button';
const App = () => <Button variant="primary">Bootstrap</Button>;

После сборки производственного пакета мы получаем дополнительные 1,7 КБ js, что неплохо. Но по-прежнему требуется включить весь загрузочный CSS, который составляет 22 КБ CSS.

Семантический интерфейс

Наконец, последняя библиотека для реакции, которую я пробовал, - это Semantic UI https://react.semantic-ui.com.

import { Button } from 'semantic-ui-react'
const App = () => <Button primary>Semantic UI</Button>;

После сборки производственного пакета мы получаем дополнительные 20,5 КБ js + безумные 91,9 КБ CSS. Совсем не здорово.

Победитель

На мой взгляд, все довольно плохо справляются с встряхиванием деревьев и включают слишком много css, но, по крайней мере, загрузчик React добавляет только несколько килобайт js, а сама библиотека мала.

Vue

Размер пакета Hello world js для самого vue составляет 30,3 КБ ( минимизированный + сжатый с помощью gzip). Я использую Vue CLI, поэтому настраиваемая сборка отсутствует.

Vuetify js

Давайте попробуем популярную библиотеку компонентов пользовательского интерфейса для vue, основанную на материальном дизайне https://vuetifyjs.com.

import 'vuetify/dist/vuetify.min.css';
import { Vuetify, VApp, VBtn } from 'vuetify/lib';
Vue.use(Vuetify, { components: { VApp, VBtn } });
<template>
   <b-button variant="success">Button</b-button>
</template>

После сборки производственного пакета мы получаем дополнительные 10,5 КБ js + 31,9 КБ css, так как нам нужно включить весь файл css, который содержит все стили для других компонентов, которыми мы не являемся. с использованием.

Квазар

Еще одна популярная библиотека - https://v1.quasar-framework.org.

import { Quasar, QBtn } from 'quasar';
Vue.use(Quasar, { components: { QBtn } });
<template>
   <q-btn color="primary" label="Primary" />
</template>

После сборки производственного пакета мы получаем дополнительные 18,4 КБ js + 26,6 КБ css. Снова не очень хорошо для одной кнопки.

Бутстрап

Наконец, давайте попробуем https: //bootstrap-vue.js.or g

import { Button } from 'bootstrap-vue/es/components';
Vue.use(Button);
<template>
   <b-button variant="primary">Bootstrap</b-button>
</template>

После сборки производственного пакета мы получаем дополнительные 63,1 КБ js + 22 КБ css (снова необходимо включить весь загрузочный css). Очевидно, здесь что-то не так, и тряска дерева вообще не работает. Следуя их документам, вы можете увидеть, что существует 8 различных способов включения пакета. Я попробовал рекомендуемый способ, импортировав только один компонент. По-прежнему не повезло.

Победитель

В то время как в React, по крайней мере, библиотека boostrap не включала весь код js, библиотеки Vue работают еще хуже. Здесь нет победителя.

Угловой

Размер пакета Hello world js для самого angular составляет 42,2 КБ ( минимизированный + gzip) + для этого требуется полифил Zone.js, который является дополнительным 13,8 КБ. Я использую angular CLI, поэтому настраиваемая сборка отсутствует.

Материал UI

Я начну с, наверное, самой популярной библиотеки для компонентов пользовательского интерфейса angular https://material.angular.io

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
import { MatButtonModule } from '@angular/material';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({ imports: [MatButtonModule, NoopAnimationsModule] })
<button mat-button>Click me!</button>

После сборки производственного пакета мы получаем дополнительные 23,1 КБ js + 8,1 КБ CSS. По умолчанию для материала angular требуется добавить модуль анимации, который можно отключить с помощью NoopAnimationsModule, но есть ошибка, и он по-прежнему добавляет много килобайт. Выпуск открыт в 2017 году https://github.com/angular/angular/issues/20002. Полный провал, не так ли?

Бутстрап

Https://ng-bootstrap.github.io/ - популярная библиотека компонентов angular, основанная на фреймворке bootstrap css.

<button class="btn">Bootstrap</button>

После сборки производственного пакета мы получаем дополнительные 0 КБ js + 22 КБ css, поскольку это требуется для импорта всего начального css. Но вы можете заметить, что он вообще не добавляет никакого размера js. Это почему? Просто потому, что для кнопки нет компонента, и вы можете использовать чистый HTML.

Четкость

Напоследок попробуем наглядный дизайн https://clarity.design.

<button class="btn btn-primary">Primary</button>

После сборки производственного пакета мы получаем дополнительные 0 КБ js + 119 КБ css, поскольку это требуется для импорта всего файла css. Компонента для js нет, поэтому мы видим 0 КБ, но 119 КБ css просто безумие, как для одной кнопки.

Победитель

Bootstrap для Angular кажется лучшим вариантом, если вы хотите спасти окончательный пакет от взрыва.

Вывод

У нас очень плохо получается создавать библиотеки компонентов. Импорт компонента кнопки должен добавить всего несколько КБ к вашему окончательному комплекту. Но можем ли мы это улучшить? Да мы можем! Просто напишите компонент таким образом, чтобы он импортировал только тот персонал, который ему нужен, чтобы он выглядел и функционировал должным образом.

Исходный код доступен по адресу https://github.com/anjmao/exurities-buttons.

Дай мне знать, что ты думаешь? Ваше здоровье.