Удаляем лишний код из рантайма CSS Modules при помощи webpack RU

Дата: 24 мая 2019 года, 16:00 - 18:30

Место: площадка конференции HolyJS 2019 Piter, зал 4

Назад к тренингам
Стас Курилов — JetBrains

Стас Курилов
JetBrains

Последние годы занимается разработкой инструментов для фронтенда. Больше всего у Стаса опыта с webpack, для которого он сделал лоадер и плагин для работы с SVG, генератор документации и даже баннерокрутилку. Стас много знает о внутреннем устройстве этого сложного и мощного инструмента.

Описание тренинга

CSS-модули — хороший инструмент для инкапсуляции стилей. Принцип работы состоит в том, что селекторы в результирующем CSS хешируются, а в JS экспортируется объект соответствия исходного имени класса на полученный хеш. Далее в коде можно обращаться к этому объекту и получить результирующее имя класса. В экосистеме webpack CSS-модули реализованы в css-loader. Особенность этой реализации в том, что css-loader экспортирует объект соответствия CSS-классов целиком, и, даже если в JS-коде был использован всего один класс, в бандл приезжает всё. К тому же неиспользованные классы не удаляются из самого CSS.

Однако имея возможность статически вычислить использование того или иного CSS-класса в JS, мы можем реализовать подобие dead code elimination: в JS заинлайнить имя класса прямо в месте использования, а из CSS удалить неиспользуемые в JS классы. В webpack реализовать такое поведение — задача нетривиальная, про это и будет воркшоп.