Если вы раньше использовали набор инструментов для работы с материалами в каком-либо из своих проектов, довольно часто вы сталкиваетесь со случаями ненужного раздувания окончательного пакета jS / CSS. Чаще всего это происходит, поскольку большая часть этих пакетов доставляется целиком, а компоненты зависят от фрагментов кода друг друга.

Поставляется материал-компоненты-сеть, этот проект специально нацелен на то, чтобы доставить вам компоненты в стиле а-ля-карт, что означает, что каждый компонент может работать независимо. Это означает, что пакет jS / CSS вашего приложения не должен принимать на себя вес каких-либо неиспользуемых компонентов. Это приводит к лучшему времени загрузки, времени до интерактивности и т. Д.

Я создал пакет, который привносит эту базовую мощь этих компонентов во вселенную preact, инкапсулируя императивные определения DOM в декларативные компоненты preact.

Чтобы использовать их, установите этот пакет

npm install preact-material-components

После установки вы можете импортировать отдельные компоненты и их стили в свое приложение.

import Button from 'preact-material-components/Button';
import Fab from 'preact-material-components/Fab';
import Snackbar from 'preact-material-components/Snack';
import 'preact-material-components/Button/style.css';
import 'preact-material-components/Fab/style.css';
import 'preact-material-components/Snackbar/style.css';

☝ Вышеупомянутый подход работает для вас, если вы используете всего пару (2–4) компонентов из всех. Поступая таким образом, вы, вероятно, оказываете огромную услугу своим клиентам и самой сети, НЕ ВЗРЫВАЯ ЭТО.

Хотя это все время отлично работает для компонентов jS, способ работы с CSS может вас огорчить, когда вы в конечном итоге используете много этих компонентов, поэтому, когда вы используете большое количество компонентов из этого пакета, вы можете захотеть изучить вместо этого используйте один связанный файл css. Вы можете принять этот вызов, сравнив размер вашего пакета CSS, используя оба подхода.

import 'preact-material-components/style.css'

Кроме того, все эти компоненты строго соответствуют спецификациям материального дизайна, и preact-material-components не изменяет / не искажает какие-либо функции, предоставляемые ими.

Вы можете просмотреть Документы и демонстрации на главном сайте.

P.S .: у preact-material-components действительно есть более простой способ импортировать материал

import {Button, Fab} from 'preact-material-components';

НО ни одно из встряхиваний дерева в настоящее время не работает для удаления неиспользуемых классов, поэтому, пожалуйста, НЕ ИСПОЛЬЗУЙТЕ ЭТО, ПОКА ВЫ ИСПОЛЬЗУЕТЕ ВСЕ ЭТИ КОМПОНЕНТЫ В СВОЕМ ПРОЕКТЕ.

P.S. Хотите взглянуть на образец приложения? вот он https://github.com/prateekbh/preact-material-components/tree/gh-pages

Надеюсь, они вам пригодятся.