Ссылки из доклада «Семь раз отмерь, один раз отправь»

links.md

Семь раз отмерь, один раз отправь

Ссылка на сам доклад

Почему важно разбивать main.js на отдельные бандлы

• why-performance-matters
• JavaScript Start-up Performance от Addy Osmani
• Reducing JavaScript Bundle Size
• Инструмент визуализации того, сколько теряет компания в деньгах по мере увеличения времени загрузки сайта
• Moving towards a faster web — про пометки медленных сайтов

Популярные подходы по уменьшению доставляемого JS

• Все про сжатие любого текстового контента
• Сжатие ассетов в brotli
• Выделение vendors, common и т.д. из основного бандла
• Сплиттинг по роутам/компонентам React
• Сплиттинг по роутам/компонентам Vue
• Сплиттинг по роутам/компонентам Angular

Инстурмент анализа бандлов

• webpack-bundle-analyzer

Инструменты для разбиения vendor.js на отдельные бандлы

• Оригинальное исследование про сплит vendor.js
• split-chunks-plugin
• webpack-npm-dependencies-analyzer — плагин, который поможет разбить vendor на группы

Инструменты для анализа связности в приложении

• arkit

Инструменты для анализа размера npm-библиотек

• bundlephobia

Работа со старыми браузерами

• debugbear исследование размера бандлов для разных браузеров
• html-webpack-multi-build-plugin
• polyfill.io
• browserlist

Патчим генератор id-шников для экспортов в webpack

• Доклад Максима Соснова «Собираем бандл мечты»
• hashed-module-ids-plugin

К чему стремиться в нарезке бандлов

• State of javascript
• Performance budgets
• Смотрим за статистикой своих пользователей раз, Смотрим за статистикой своих пользователей два

Как снова не набрать вес

• bundlesize
• size-limit
• size-plugin
• lighthouse
• Какие метрики можно анализировать

CSS

• async CSS loading
• Critical CSS
• Генерация Critical CSS
• Unused CSS
• tailwindcss
• Про CSS in JS раз
• Про CSS in JS два
• CSS in JS без runtime Treat
• CSS in JS без runtime Linaria
• CSS in JS без runtime Astroturf

SVG

• SVG-sprite-loader

Выводы

• Культура производительности в команде, как ее построить

Просто полезные ссылки

• Дмитрия Пацура — Optimize the size of your SPA, битва за байты
• cost-of-javascript-2019
• Рассказ про Youtube и размер бандла в 2009
• Fast load times — набор рекомендаций от Google