LINUX.ORG.RU

mini-фикация CSS: подходы.

 ,


0

1

WARNING: не требуется рассуждать об осмысленности нижеприведённого. Для тебя смысла нет - ты свободен.

  1. Пишу JS-приложеньки на своём недо-react фреймворке. Юзаю TSX, который компилю с помощью tsc в JS, подставляя свою функцию как jsxFactory. Позволяет писать свои компоненты как
render() {
  return <div cls={["aaa", "bbb"]}>blabla</div>
}

(список строк в ключе «cls» ждёт мой кастомный jsxFactory и пихает эти строки в element.classList.add() и т.п.) юзаю какой-то самописный tsconfig.json в корне проекта и собираю с помощью Makefile. Трушный юниксвей. Смысл был лишь в том, чтобы избавиться от ручного конструирования сложных DOM-конструкций руками в сыром JS, это удобно поручить JSX. Такой костыль уже получаетс достаточно удобным в работе: в TypeScript просто создаёшь компонент, вызываешь render() и готово.

  1. Есть монолитная CSS портянка, в которой руками придуманы имена всем классам. Эти имена используются в коде, аналогичном выше. Т.е. эти имена захардкожены.

  2. Хочется юзать, возможно, несколько исходных CSS - один CSS на один мой JSX-компонент и получить на выходе один монолитный минифицированный CSS с искажёнными именами и выкинутыми комментами. Соответственно, плохо понимаю возможные подходы к внедрению этого на практике.

Речь идёт о работе с базовыми «низкоуровневыми» вещами, типа tsc и подобными, без использования монструозных сборщиков, make пока вполне устраивает на роль «выполнить такую-то таску в зависимости от такой-то». Предпочтения маленьким инструментам, решающим маленькую задачу. Юникс-вей и всё такое, пока без гульпов, вебпаков и прочего такого: тут главное пока изучение работы технологий, а не получение хипстерского смузи-пайплайна сборки.

  1. Видимо первый шаг - сгенерить некий constants.ts, в котором будет что-то типа:
var cn_aaa = "aaa";
var cn_bbb = "bbb";

юзать эти переменные так:

render() {
  return <div cls={[cn_aaa, cn_bbb]}>blabla</div>
}
  1. Далее наворотить какой-то минификатор CSS, который порождает из списка CSS-файлов новый монолитный CSS и новую версию constants.ts с новыми именами классов. Этот монолитный CSS поедет в прод, а новый constants.ts будет использоваться для оконечной компиляции проекта.

  2. Вот только я не знаю таких CSS-минификаторов. «Напиши сам» - звучит норм. Умею, практикую. Но возможно удастся здесь без велосипедов. Велосипеды люблю, но хотелось бы не сильно катастрофически отстать от трендов.



Последнее исправление: magnitoferon (всего исправлений: 3)

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

WitcherGeralt ★★
()
Ответ на: комментарий от WitcherGeralt

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

Да понятно. Но на каком-то пхоруме надо было это впервые сформулировать. Других по фронтенду особо не знаю, мало сижу на форумах. Кажется все хипсторы в телеге сидят, а там такую длинную телегу не запостить.

magnitoferon
() автор топика

Хочется юзать, возможно, несколько исходных CSS - один CSS на один мой JSX-компонент и получить на выходе один монолитный минифицированный CSS с искажёнными именами и выкинутыми комментами. Соответственно, плохо понимаю возможные подходы к внедрению этого на практике.

Это не минифицированный, это обфусцированный. А как вы предлагаете искажать имена классов, если они же используются в другом месте?

fernandos ★★★
()
Ответ на: комментарий от fernandos

Это не минифицированный, это обфусцированный.

Минификация обычно включает обфускацию. Обычно не важно, каким способом ты уменьшил размер. Обфускация, обхерация, чё там только не включается в это понятие, лишь бы уменьшить размер.

magnitoferon
() автор топика
Ответ на: комментарий от fernandos

А как вы предлагаете искажать имена классов, если они же используются в другом месте?

Ну вот предложил в последних 3 пунктах. Выносишь имена в переменные. Далее тебе обфускатор генерит новые имена, отражая их в новой версии этой таблицы имён классов.

magnitoferon
() автор топика
Ответ на: комментарий от fernandos

Пардон, а для чего таким сексом заниматься?

Обычно объём трафика и число запросов уменьшать, больше незачем. Цель вполне норм.

magnitoferon
() автор топика
Ответ на: комментарий от magnitoferon

Минификация решает эту цель, но прямо заменять имена классов на другие, не знаю. Не так много занимают имена классов и айди, сколько остальной код. ИлиУВасТамТакиеИмена,КоторыеЗанимаютОченьМногоМеста ?

Не видел ничего подобного, а для замены имён, вероятно, прийдётся писать.

fernandos ★★★
()

Ну, блин. Ты не юзаешь Gulp и Webpack, соответственно никакой пост-/пре- обработки. Юзай тогда минификатор в браузере, есть куча сайтов для этого. Дальше всё это копипасть себе в css файл. Всё остальное – дикие костыли.

CryNet ★★★★★
()
Ответ на: комментарий от magnitoferon

Обычно объём трафика и число запросов уменьшать

Прости, а что уменьшать? Что у тебя за проект такой? Вот у меня на работе готовый сайт на React + парочка библиотек (галерея, скролл, etc) – 3 МБ бандл вместе с JS и CSS. Статические картинки и небольшое видео – 38.4 МБ. Причём это не просто статик лендос, а есть и логика, и запросы на бэк за данными и фильтр, и т.д…

CryNet ★★★★★
()
Последнее исправление: CryNet (всего исправлений: 1)
Ответ на: комментарий от fernandos

Минификация решает эту цель, но прямо заменять имена классов на другие, не знаю.

Ну имена генерятся так: a, b, c, d, e, …., A, B, …, Z, Aa, Ab… то есть ты точно получишь все свои имена короче, ибо общее их число врядли у тебя миллионы.

magnitoferon
() автор топика
Ответ на: комментарий от CryNet

Ну, блин. Ты не юзаешь Gulp и Webpack, соответственно никакой пост-/пре- обработки.

Юзаю. У меня же Makefile. Могу навернуть любое число промежуточных слоёв преобразований.

magnitoferon
() автор топика
Ответ на: комментарий от CryNet

Прости, а что уменьшать? Что у тебя за проект такой?

Мне не важно, что за проект. Это просто хороший тон, чтобы не думать потом, если ты разрастёшься, про цену на трафик, серваки и что-то ещё. Тем более, это просто и не рокетсаенс. «Преждевременная оптимизация», которая почти ничего не стоит и не добавляет проблем (кроме дебага на проде) - не страшно.

magnitoferon
() автор топика
Ответ на: комментарий от CryNet

Вот у меня на работе готовый сайт на React + парочка библиотек (галерея, скролл, etc) – 3 МБ бандл вместе с JS и CSS

Ппц, мало того реакт-код выглядит ужасно и работает не сильно быстро, так ещё и весит на порядок больше чем у свелте и что там ещё компилируемого выходило, ну и зачем оно такое?

ddidwyll ★★★★
()
Ответ на: комментарий от ddidwyll

мало того реакт-код выглядит ужасно и работает не сильно быстро,

Не замечал у грамотных react-приложенек особых тормозов.

magnitoferon
() автор топика

JS

makefile

Ты уверен что все делаешь правильно?

kardapoltsev ★★★★★
()
Ответ на: комментарий от magnitoferon

Посмотри бенчмарки. Ну и посыл, почему люди этим пользуются, если есть тоже самое только удобнее, быстрее, легче?

ddidwyll ★★★★
()
Ответ на: комментарий от ddidwyll

Посмотри бенчмарки. Ну и посыл, почему люди этим пользуются, если есть тоже самое только удобнее, быстрее, легче?

Простота для слабаков. И она не критерий треда. В треде интересовали физические способы достижения желаемого, а не что там кому удобнее. Могу молотком в мейкфайл вбить что угодно. Движок исполнения зависимых задач - что ещё нужно. Пишется один раз в жизни этот мейкфайл, невелико удельное умственное напряжение его переделать раз в 4 месяца.

magnitoferon
() автор топика
Ответ на: комментарий от CryNet

Всё остальное – дикие костыли

У него аж один файл, полно простых минификаторов.

fernandos ★★★
()
Ответ на: комментарий от CryNet

Не слишком жирно для лендинга?

Картинки хоть в нормальном формате?

fernandos ★★★
()
Ответ на: комментарий от fernandos

Я про то, что профит маленький.

Ну вот у меня штук 15 исходников на .ts/.tsx разного размера. Так удобно разрабатывать. Всё раскидано по компонентам. HTTP2/3 конечно позволяют клиенту сразу отправить все 15 файлов пачкой, но пока у меня http/1.1 клиент делает 15 раундтрипов, что ощутимо. А если пинг до московского дата-центра у него не 1ms, как у коренного москвича, а 150, то жопа.

magnitoferon
() автор топика
Ответ на: комментарий от magnitoferon

У вас в теме про минификацию и замену имён, при чём тут можножество тс(х) файлов?

Я же говорю, что от замены .имя_класса на .а вы практически не выиграете.

fernandos ★★★
()
Ответ на: комментарий от fernandos

У вас в теме про минификацию и замену имён, при чём тут можножество тс(х) файлов?

Ну вся эта история в целом - про утрамбовывание пачки .ts/.tsx или же пачки .css (один для каждого компонента написанный) в монолитный нечитаемый, зато мелкий, файл.

magnitoferon
() автор топика
Ответ на: комментарий от fernandos

Я же говорю, что от замены .имя_класса на .а вы практически не выиграете.

Тут игра в «максимум». Давайте возьмём написанный человеком исходник и жахнем по максимуму: вырежем пробелы, переносы, комменты, заодно имена lastTimestampRender поменяем на bR и оценим эффект в целом. Раз уж начали выжимать соки, чё бы не провернуть мясорубку до предела.

magnitoferon
() автор топика
Ответ на: комментарий от fernandos

Для этого нужны разные средства.

Да хоть гиперразные.

magnitoferon
() автор топика
Ответ на: комментарий от fernandos

Цена не оправдывает средства.

Цена = 0. Делается в свободное время, которое иначе было бы потрачено на игру в танки или надроч на ютуб.

magnitoferon
() автор топика
Ответ на: комментарий от fernandos

Дело не во времени, а в возможных рисках.

Я пока не нашёл. Тем более, у всяких гуглов всё пожато/обфусцированно и как-то живут. Если глянуть на имена классов, то там жесть: http://0x0.st/-5Jg.jpg

magnitoferon
() автор топика
Ответ на: комментарий от fernandos

Вы сравниваете свои возможности с возможностями гугла?

Короче я не понял, когда начался срачь про менеджмент. Предлагаю вернуться к чисто техническому сабжу.

magnitoferon
() автор топика
Ответ на: комментарий от CryNet

3 МБ бандл вместе с JS и CSS

Пожалуйста, скажи мне, что я тебя не так понял, и это не за раз всё грузится. Иначе веберов пора таки начинать к стеночке ставить. Ведь ты считаешь, что это очень мало, да?

Если всё же за раз, то сколько оно весит пожатое?

WitcherGeralt ★★
()
Последнее исправление: WitcherGeralt (всего исправлений: 3)

Обычно реактисты используют связку лоадеров для webpack: css-loader обфусцирует классы, опционально с учётом изоляции в модули, style-loader подгружает всё как css, а через импорт позволяет получить в коде обфусцированные имена классов. При использовании react-create-app всё это из коробки уже настроено. Через make будет затруднительно, потому что отдельных скриптовых утилит для подобного не припомню.

static_lab ★★★★★
()
Ответ на: комментарий от WitcherGeralt

@fernandos, @ddidwyll

А не. Обманул. Не 3 МБ. То 3 МБ сама папка static, а внутри есть map файлы, возможно старые бандлы и прочее.

Ну вот и считай.

JS: https://i.ibb.co/hV0vYYX/11.png

CSS: https://i.ibb.co/5GjxVbR/12.png

Всё грузиться один раз, а дальше уже генерируется на клиенте

Телеметрия заблочена (cамый верхний JS файл)

CryNet ★★★★★
()
Последнее исправление: CryNet (всего исправлений: 5)

Это бесполезный онанизм.

Буквально, некий ритуал который ты хочешь выполнять, чтобы испытывать ощущение, будто сделал что-то полезное, как-то улучшил или ускорил работу. Подчёркиваю — не ради реальной пользы, а ради ощущения.

Оно может быть оправдано только если ты — гугл с охулиардами уников каждый день, и каждый срезанный байтик экономит тонны трафа.

Да и то, даже гугл такой фигней не занимается, динамическая генерация и обфускация у него, по большей части, чтобы бороться с пауками и скрейперами, тягающими бигдату нахаляву (в обход платного API) и накручивающими статистику.

Проведи эксперимент — возьми свою охапку css, упакуй в .tar.gz, сравни размеры с упакованной gzip минифицированной версией. Сильно отличается? HTTP/2 и gzip сейчас включёны и поддерживаются практически везде, поэтому склеивание всего в один файлик давно перестало иметь практический смысл.

Побенчмаркай, насколько быстро парсится твой css. Если там не десятки мегабайт генерированного кода, а реально написанное руками — разница будет незначительная.

anonymous
()
Ответ на: комментарий от anonymous

Поддерживаю анона. Если сайт проходит тесты в Lighthouse и нет ошибок – всё, ты красавчик!

Как правило всё равно всё упирается в большие и неоптимизированные картинки, где она будет весить как весь твой JS.

CryNet ★★★★★
()
Последнее исправление: CryNet (всего исправлений: 1)

Попробуй PostCSS с плагином postcss-modules

deadNightTiger ★★★★★
()
Ответ на: комментарий от anonymous

Это бесполезный онанизм.

Бывает. Вопрос пользы в треде не стоял. Свободен.

magnitoferon
() автор топика
Ответ на: комментарий от ya-betmen

Почему бы просто не подключить пейджспид и не заниматься всем этим руками?

Цель в изучении технологий. Ну сколько раз ещё повторять-то.

magnitoferon
() автор топика
Ответ на: комментарий от CryNet

Теперь по-божески.

А то было похоже, что ленлинг написан на блазоре.

fernandos ★★★
()
Ответ на: комментарий от fernandos

Пишите своё велосипед, остальной мир не готов заниматься подобным онанизмом.

Пасиб, что разрешил. Свободен.

magnitoferon
() автор топика
Ответ на: комментарий от magnitoferon

Рад, что вы потихоньку учитесь с людьми разговаривать, сравните с тем, что вы так быстро удалили, не за что.

fernandos ★★★
()
Ответ на: комментарий от fernandos

Рад, что вы потихоньку учитесь с людьми разговаривать, сравните с тем, что вы так быстро удалили, не за что.

Спасибушки, угушечки.

magnitoferon
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.