|
| 1 | +# Задание №6 |
| 2 | + |
| 3 | +## Оптимизация загрузки js на dev.to |
| 4 | + |
| 5 | +На всех страницах `dev.to` загружается файл `vendor.js`. |
| 6 | + |
| 7 | +Анализ показывает, что этот файл содержит библиотеку `moment.js`, печально известную своим большим размером. |
| 8 | + |
| 9 | +## Идея оптимизации |
| 10 | + |
| 11 | + |
| 12 | +- Включите в процесс сборки `webpack` плагин `webpack-bundle-analyzer`; |
| 13 | +- Выполните анализ исходной версии приложения с помощью `webpack-bundle-analyzer`; убедитесь, что `moment.js` входит в сборку `vendor` |
| 14 | +- Закомментируйте всё содержимое файла `proCharts.js`; |
| 15 | +- Выполните анализ изменённой версии в `webpack-bundle-analyzer`; |
| 16 | + |
| 17 | +Вы найдёте, что `moment.js` пропал из `vendor` и эта сборка стала заметно меньше; |
| 18 | + |
| 19 | + |
| 20 | +## Защита |
| 21 | + |
| 22 | +Поздравляю, вы сократили объём загружаемого `js` на всех страницах сайта; защитите это достижение на примере главной страницы. |
| 23 | + |
| 24 | +Создайте бюджет для `sitespeed.io` |
| 25 | + |
| 26 | +```json |
| 27 | +{ |
| 28 | + "budget": { |
| 29 | + "transferSize": { |
| 30 | + "javascript": 460000 |
| 31 | + } |
| 32 | + } |
| 33 | +} |
| 34 | +``` |
| 35 | + |
| 36 | +Убедитесь, что бюджет соблюдается: |
| 37 | + |
| 38 | +``` |
| 39 | +docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io http://host.docker.internal:3000/ -n 1 --budget.configPath homeBudget.json |
| 40 | +``` |
| 41 | + |
| 42 | + |
| 43 | +## Cleanup |
| 44 | + |
| 45 | +Разберитесь, в каком месте приложения код `moment.js` реально используется и подключите его только там. |
| 46 | + |
| 47 | + |
| 48 | +Убедитесь, что достигнутый бюджет на загрузку `js` для главной страницы всё ещё соблюдается. |
| 49 | + |
| 50 | +## Как сдать задание |
| 51 | + |
| 52 | +Сделать `PR` в этот репозиторий, содержащий: |
| 53 | + |
| 54 | +- изменения кода |
| 55 | +- описание |
| 56 | +- скриншоты `bundle-analyzer` до и после оптимизации |
| 57 | +- выполните анализ исходной версии в `sitespeed.io`, сделав 5 прогонов (`-n 5`), экспортируйте результат в формат `HAR` и закомитьте под названием `slow.har` |
| 58 | +- сделайте то же самое для оптимизированной версии и закомитьте `fast.har` |
| 59 | +- добавьте в описание ссылку на сравнение быстрой и медленной версии с помощью инструмента `compare.sitespeed.io`: `https://compare.sitespeed.io/?har1=FULL_URL1&har2=FULL_URL2&compare=1` |
| 60 | + |
1 | 61 | <div align="center">
|
2 | 62 | <br>
|
3 | 63 | <img
|
|
0 commit comments