Ускорение начальной загрузки приложения

  1. Следите за зависимостями. Уже писал об этом ранее, но хочу рассказать про другой кейс, что ещё интересного можно увидеть в сборке (не «удалите moment.js», о чём пишут в 99 % статей на тему анализа зависимостей). В этот раз воспользуемся инструментом source-map-explorer.

Особое выравнивание чисел в таблице

Возьмём обычную таблицу, где есть числа.

Такие числа неудобно сравнивать из-за выравнивания по левому краю, разрядность плохо считывается. Что ж, выровняем этот столбец по правому краю.

Разбиение библиотеки на точки входа

Ключевые слова: angular, secondary entry-points, component library.

В прошлой заметке мы разбивали одну библиотеку на несколько, дабы пользователи не тянули крупные куски функциональности, которые им не нужны. Но что, если библиотека продолжает расти? Можно продолжать разбивать на небольшие библиотеки, но управляться с ними в ручном режиме уже будет неудобно (версионирование, публикация). Есть и другое решение — второстепенные точки входа.

Моно­репозиторий с зависимыми библиотеками

Исходные данные: разрабатываем библиотеку компонентов на Ангуляре. Поехали!

При помощи Ангуляра могут создаваться проекты двух типов: приложения и библиотеки. Как указано выше, нас интересует разработка именно библиотеки. Но в процессе разработки эту библиотеку необходимо где-то тестировать. Соответственно, нам нужно тестовое приложение. Неудобно создавать для этого отдельное рабочее пространство, поэтому положим их рядом, в папку projects, структура (упрощённо) получается следующая:

projects
├╴app
└╴lib
package.json
angular.json
tsconfig.json

Следите за зависимостями

Однажды обратил внимание, что у коллег размер проекта (the initial size of the app) перевалил за 10 Мб. Пятничным вечером, когда было скучно, решил посмотреть, в чём там дело, можно ли сделать что-то ощутимое небольшими усилиями.

В проекте практически нет медиафайлов, поэтому сразу смотрим на скрипты и видим монстра под названием vendor.js, который весит 9550 Кб, всё остальное значительно меньше. Для анализа содержимого воспользуемся инструментом webpack-bundle-analyzer.

А если без «если»?

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

В примерах будет использован джаваскрипт.

Кнопки взаимодействия

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

Что ж, давайте его проверим. Как обстоят дела с дёрганием подсказки?

Нервный тик интерфейса

Порой на сайтах у интерактивных элементов есть неприятные «заколдованные» места. Когда наводишь туда курсор, то попадаешь в некий «цикл дёрганий». Связано это со сменой состояний, когда срабатывает действие на hover, что-то происходит, под курсором оказывается другая логическая область, это что-то исчезает, и ты вновь оказываешься на начальной точке, вызывая первоначальное действие.

Покажу пример. Вот есть Твиттер, посмотрим на основной компононет — твит.

Сделай хоть что-нибудь

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

Что толку от голосования в ТСЖ?

Зачем ходить на выборы мэра, мой голос ничего не решает.

Я не могу повлиять на чистоту и благоустройство своего района.

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

Список репозиториев

Не так давно на Гитхабе у репозиториев появилась кнопка Used by со счётчиком, который показывает количество зависимых репозиториев. По клику мы попадаем на страницу со списком.

Выглядит несколько неряшливо. Немного приблизим и добавим направляющую, чтобы яснее увидеть неприятные места.