Skip to content

Instantly share code, notes, and snippets.

View Crazymax11's full-sized avatar

Max Sosnov Crazymax11

View GitHub Profile

Мы можем использовать то, что у нас есть в стандарте

  const result = cats.filter(isKitten)
    .slice(0, 5);

Но это не очень функционально. Мы можем воспользоваться Lodash'ем.

Производительность

Главная грузится непозволительно долго. Известные проблемы:

  1. inline css
  2. для главной грузится не только главная
  3. картиночки не lazyload
  4. js долго работает
  5. огромный project встроенный в js
  6. payload с сервера содержит Весь Мир
  7. долгий TTF
  • Чистый код
    • Объединение линтеров
      • Подзадачи для всех бандлов
    • Обновление еслинта
      • Подзадачи для всех бандлов
    • Обновление правил eslint и prettier
      • Обсудить airbnb стайлгайд
        • Либо принимаем полностью
        • Либо дорабатываем
  • Либо делаем свой
@Crazymax11
Crazymax11 / webpack-optimizations.md
Last active July 23, 2022 20:43
Оптимизации вебпака

Оптимизации сборки

  • CSS - для продакша выносите CSS с помощью ExtractTextPlugin/ExtractCssChunksPlugin. Для разработки используйте styleloader.
  • Собирайте 2 версии приложения - для старых браузеров, и для браузеров, поддерживающих новый ES. Сделайте одну сборку с помощью babel-env в полный ES5 и вторую в более менее прогрессивные браузеры. Это уменьшит количество кода, которое вы отдаете пользователям с современными браузерами, а также ускорит выполнение этого кода у них. Подробнее тут.
  • Оптимизируйте ассеты (Uglify, CSSO, SVGO, html minifier, Gzip, Brotli, оптимизаторы картинок и тд и тп).
  • Обзятально используйте Tree Shaking!
  • Используйте Webpack Bundle Analyzer.
  • Используйте алиасы.
  • Грузите только те части лодаша, которые вам действительно нужны с помощь
@Crazymax11
Crazymax11 / rm.md
Last active November 15, 2017 02:19

Roadmap

ЭТО НЕПРИОРИТЕЗИРОВАННЫЙ СПИСОК ЗАДАЧ БЕЗ ИЗЛИШНЕЙ КОНКРЕТИКИ

  • Обновление большого вебаппа
    • Попробовать подключить VueX к большому вебаппу
      • Просто встроить VueX чтоб он инстансировался
      • Инициализировать стор на BE для каждого запроса
      • Сделать рабочим mapGetters на BE
  • Сделать гидрацию стора на FE
import Application from ./Common/Application.js’;
import _ from ‘lodash’;
import RootComponent from ‘Components/Root/Root.js’;
import generalStyles from ./styles/general.scss’;
// какой нибудь ES6\7 синтаксис
new Application(RootComponent);

Ускорение FE

Страницы которые надо ускорить

  • Новая мобилка
  • Карточка паблика
  • Каталог новостроек
  • Карточки новостройки
  • Поиск паблика
  • Карточка мобилка
@Crazymax11
Crazymax11 / comp.md
Last active December 28, 2017 15:59

Компетенции

JS

  • Замыкания
  • Прототипы
  • ES6
    • Классы
    • Промисы
  • Прокси
/**
* скрипт на переходный период большого вебаппа
* скрипт переводит .vue файлы в js+scss+pug формат
* принимаемый большим вебаппом
* Алгоритм невероятно простой
* Скрипт разбирает внутренности script/style/template тэгов
* и складывает их содержимое в js/scss/pug файл
* в js инжектятся импорты стилей и шаблона, шаблон спредится в компонент
* следовательно ограничения - только scss, только pug, никаких scoped стилей
*