Конференция завершена. Ждем вас на HighLoad++ в следующий раз!

Как мы разбили клиент miro.com на ленивые модули, чтобы ускорить его загрузку и масштабировать разработку Архитектура и производительность фронтенда

Доклад принят в программу конференции
Олег Плотников
Miro

Lead front-end developer at Miro.com.
Опыт и интересы: архитектура, ux, редактура.

telegram @oleg_plotnikov
Тезисы

У нас на руках был один монолитный клиент и две задачи:
1) Загрузить целевой контент пользователю как можно быстрее.
2) Сделать так, чтобы разрабатывать клиент могло гораздо больше разработчиков, чем сейчас. Например 50.

Результаты:
1) Разрезали клиент на лениво-загружающиеся модули и ускорили загрузку приложения в 3 раза.
2) Новые фичи в продукте можно писать так, чтобы они загружались отложенно и минимально влияли друг на друга.

Расскажу, как организовали файловую структуру проекта и какие проверки добавили с помощью Webpack, чтобы один случайный импорт не убил все оптимизации. Опишу, что такое ленивый модуль. Расскажу об особенностях разрезания приложения, написанного на TypeScipt и AngularJS. И опишу принципы, которым мы теперь следуем, чтобы поддерживать достигнутые показатели.

Производительность и мониторинг фронтенда
Rambler's Top100