Очень быстрый CSS-парсер (возможно самый быстрый из написанных на JS🤫) наконец получил стабильную версию 🎉
https://github.com/csstree/csstree
Он позволяет очень быстро и детально разбирать/модифицировать CSS.
css-tree обрабатывает CSS отталкиваясь от W3C-спецификации.
Это можно использовать, например, для валидации вашего CSS и для валидации с использованием css-tree есть плагины для stylelint, VSCode и Atom:
https://github.com/csstree/stylelint-validator
https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree
https://atom.io/packages/csstree-validator
Я и сам приложил свои руки к их созданию ☺️

Разработкой парсера занимается Роман Дворнов (https://twitter.com/rdvornov) и вот некоторые его доклады по теме:
https://www.youtube.com/watch?v=8kjE1n6mQ2s
https://www.youtube.com/watch?v=c2Sw5gmOwmE
https://www.youtube.com/watch?v=jqaXpKqkYvM

Как вы, скорее всего, заметили, канал wdxlab был скромно переименован в "Сергей Мелюков"
Люди путаются где я, а где wdxlab, бывает ищут по "wdxlab" и ничего не находят, а вот "Сергей Мелюков" давольно неплохо проиндексирован, поэтому я решил переименовать канал. Его суть и направление от этого не поменялись 😉

Я наконец-то сделал это! Я опубликовал новую версию webpack-аналайзера!
Можно вживую попробовать здесь: https://statoscope.tech
Репозиторий здесь: https://github.com/smelukov/statoscope/tree/master/packages/ui-webpack
Теперь наступает самый интересный этап - тестирование на разных проектах.
Пожалуйста, попробуйте аналайзер на своих проектах.
Дайте мне пожалуйста знать, если что-то не работает или у вас есть какие-то идеи или предложения

Впереди самый крупный минорный релиз статоскопа. Работаю над возможностью загружать несколько статов и возможностью сравнения сборок.

Мой коллега Никита Сидоров сделал прекрасный доклад на тему поиска дублей в коде. В числе прочего, упомянул статоскоп и одну из его киллер-фичей о которой я хочу рассказать подробнее чуть позже - составление кастомных отчетов.
https://youtu.be/wTkeS-X_OIU?t=10710

Мой бывший коллега и просто хороший друг Роман Дворнов завел телеграм-канал https://www.tgoop.com/gorshochekvarit
Роман - гениальнейший инженер, автор быстрейшего css-парсера css-tree, css-минификатора csso, языка запросов jora, (который используется в статоскопе) и платформы для построения стендов для анализа JSON - Discovery (который тоже используется в статоскопе)
Ему действительно есть чем поделиться ;)

⏰ Время новостей!
Все это время Статоскоп развивался и обрастал возможностями. И вот одна из них.
Теперь можно посмотреть на то, какие модули в вашем коде являются копипастой.
Например, здесь мы видим, что есть модуль css/style.css у которого есть 3 копии.
Мы сразу можем посмотерть причину, по которой подключается любая из копий.
P.S: Заметили, что на главной странице теперь гораздо больше полезных индикаторов? ;)

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

Ну и новая (хотя о старой еще толком не рассказал 🙈) киллер-фича - сравнение сборок 💣
Теперь можно сравнить между собой два файла со статами и узнать какие модули/чанки/ассеты были добавлены/удалены/изменены и как это повлияло на вашу сборку. Отдельного внимания заслуживает сравнение добавленных и удаленных пакетов и их копий. Очень часто, одним неловким движением руки можно добавить в сборку пару-тройку инстансов одного пакета, разных версий. Теперь вы сможете сравнить сборки и узнать сколько ненужный копий пакетов вы добавили в сборку.

Осталось подпилить некоторые шороховатости по UI и производительности, добавить информацию в ридми и можно релизить, просто не терпелось поделиться новостями ;)

Ура-ура! Мой доклад про webpack с HolyJS выложили в открытый доступ 🎉
https://youtu.be/qKz9YAeKYMs

Наверное мало кто знает, но в Статоскопе можно составлять свои собственные отчеты по статам и потом делиться этими отчетами с коллегами. Я обязательно расскажу об этом в статье на хабре.
Так же, Статоскоп умеет обрабатывать несколько файлов со статами. В этих файлах может быть информация как об одной компиляции, так и о нескольких сразу (например, если вы в одной сборке собираете и клиент и сервер).
Проблема здесь в том, чтобы структура статов всегда была единой вне зависимости от их содржимого, ведь если я с каждым релизом буду ее менять, то ваши кастомные отчеты будут ломаться с той же частотой.
Сейчас я практически стандартизировал структуру статов и готовлюсь к релизу

Сейчас остановился на такой структуре.

Друзья, всех с первым днем зимы и третьей версией Статоскопа!
Statoscope 3.0 опубликован! 🎉
Почему 3.0? Я очень сильно поменял структуру статов, в которую в итоге превращаются json-файлы, поэтому это мажорный апдейт.
Если коротко, то список изменений такой:
- Сравнение сборок 🚀
- Теперь можно загружать несколько файлов и переключаться между ними
- Поддержка проектов с мультиконфигом
- Переработан дашборд на главной странице
- Добавлен поиск модулей с идентичным исходником
- Переработан Readme на github 😉

Полный список изменений можно посмотреть в changelog.
Ну а сам Статоскоп, как обычно - https://statoscope.tech

Следующие шаги:
- Написать статью на Хабр, чтобы о Статоскопе узнало как можно больше людей
- Внедрить потоковый парсер JSON-статов чтобы снять большинство ограничений на размер статов (Роман Дворнов очень подробно описывает пропроблему в своем канале и рассказывает как решает ее)
- Реализовать интеграцию Статскопа с CI

И, как обычно, если видите какие-то недочеты в работе Статоскопа, или у вас просто есть идеи по его улучшению, то смело заводите issue на github 😉
Можно даже поиграть в такую "игру". Пусть каждый кто прочитат этот пост, задаст себе вопрос: "А что я хочу узнать о моем бандле?"
Свои ответы присылайте в комменты к этому посту или сразу заводите issue 😉
Буду очень благодарен за это!

P.S.: Если вы инженер или компания, зантересованная в развитии Статоскопа, то вы можете поддержать Статоскоп на OpenCollective 😉

Друзья, опубликован Statoscope 3.2.0 в котором добавился полноценный webpack плагин.
К сожалению, не все хотят/могут загружать свои статы на внешний ресурс (https://statoscope.tech), и хотя загружаемые статы нигде не хранятся и остаются исключительно в вашем браузере, множество людей ограничены NDA, что не позволяет им загружать что-либо на неизвестные ресурсы.
В любом случае, теперь ничего никуда загружать не нужно, просто подключите webpack-плагин, который сохранит один единственный HTML с отчетом и автоматически откроет его после завершения компилции.
const StatoscopeWebpackPlugin = require('@statoscope/ui-webpack');

config.plugins.push(new StatoscopeWebpackPlugin());
Приятного использования 😊

Эксперементирую с поточным JSON-парсером, который пилит Роман Дворнов
Только что удалось запихать в Статоскоп статы размером в 1 ГБ (напомню, что сейчас макисмальный размер статов составляет 512mb, из-за ограничения на длину строки в движке V8)
Чуть позже расскажу что и как пришлось подшаманить и почему даже с поточным парсером не все так просто 😉

Друзья, опубликован Statoscope 3.3.0
Теперь он поддерживает статы любого размера, а еще, теперь можно указать список статов для сравнения прямо в плагине
Полный список изменений тут https://github.com/smelukov/statoscope/releases/tag/v3.3.0

https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/406
А почему бы и нет 😉

Друзья, поздравляю вас с Новым Годом! 🎄
У меня, как всегда, много планов и целей на этот год и очень скоро я сделаю очень важный для меня анонс. И пусть в новом году у всех нас все наши планы реализуются 🚀