Sanjar Tolibjonov

learn.javascript.ru

Создатель - Илья Кантор, мессия ECMAScript во плоти

Чувак, идешь сначала сюда https://learn.javascript.ru/
Пока Илья с товарищами по команде тебе надоедают, учишь английский.
Потом переключаешься на бритоголового https://egghead.io/
Потом, если покажется мало, начнешь курить спеки. К этому времени уже освоишь гугл и сможешь сам их найти.

Лучшие практики SPA

1. KISS - использовать только то, что действительно нужно. Например вам не нужен Javascript, если нужно просто сделать выпадающее меню. Достаточно просто CSS. Тоже самое применяется и к JS, вам не нужен Angular, если есть просто форма обратной связи. Такая задача решается на vanillajs.
   
2. Использование фреймворков, например bootstrap, foundation и т.д. Обычно из них берется типография и сетки. Иногда формы. Я обычно беру bootstrap-stylus и собираю из него.
   
3. Critical rendering path - минимальный набор CSS, который требуется для отображения первого экрана страницы, который потом будет встроен внутрь html-файла. Пример.
   
4. Применение систем сборки, например gulp. Основной смысл заключается в том, что сначала вы дробите SPA на множество мелких компонентов/модулей/блоков. Затем унифицируете их. В итоге получается набор небольших файлов. Затем из этого набора собирается два больших файла (css, js) и они прогоняются через оптимизатор и минификатор.
   
5. Использование CDN. CDN позволяет ускорить загрузку для часто-посещаемых и популярных страниц за счет уменьшения времени доставки контента. Особенно актуально для SPA, поскольку они представляют собой статический контент, который можно кэшировать без последствий.
   

Системы сборки

Принцип работы прост, взять кучу файлов, прогнать через набор фильтров, называемых препроцессорами, пост-процессорами, компиляторами, минификаторами и т.д., затем склеить и записать внутрь общих файлов.
Остальное - ньюансы. Просто гуглите любой и идете на его веб-сайт. Непонятно, гуглите дальше.

Модули AMD, CJS, UMD

Они предназначены для управления зависимостями. Например, когда у вас есть два десятка компонентов и один зависит от другого. Суть их в том, чтобы просто объявлять зависимости в компонентах используя тот или иной способ описанный в документации. Начните отсюда.

Сборка и подключение css

Здесь и так ясно, что нужно сначала освоить сборщики. postcss - это когда обычный css скармливается фильтру, который разбирает его, добавляет префиксы к свойствам, оптимизирует наименования цветов и т.д. Убирает дублирующие свойства.

В целом очень толково про оптимизацию расписано здесь https://developers.google.com/web/?hl=ru

Вот Вы только ВУЗ закончили, и уже жалуетесь, что разработчики вокруг слабые. Что ж Вы говорить будете, когда архитектором станете? :(

Это я к тому, что (1) любое развитие начинается с личности, а не с команды, и (2) если Вы хотите достичь вершин, то работа с теми, кто слабее Вас, должна стать неотъемлемой частью Вашего бытия. И Вы должны быть этого достойны. Никто не хочет иметь в команде чванливого супергероя, но мудрый и терпеливый наставник, способный вовремя подставить плечо более слабому - это очень важная роль. Так что, если действительно хотите развиваться, в первую очередь займитесь своими личными качествами. Поверьте, они часто более важны, чем умение писать оптимальный код.

Что касается кода, то есть несколько направлений (скорее всего, этим Вам придётся заниматься в свободное время):

• читайте и экспериментируйте; вам нужен широкий кругозор и глубокие знания в ключевых областях (таких, как особенности реализации типов, производительность и т.п.);
  
• возьмите какой-то качественный проект с открытым кодом и проведите анализ кода - наверняка найдёте много интересного;
  
• займитесь фрилансом: и денюжка лишняя не помешает, и головомойки периодические от тимлидов заказчика себе обеспечите.
  

Ну и наверняка ещё что-то можно в этот список добавить. Было бы желание. А вот жаловаться - бросьте!