Skip to content

Commit a72a5a5

Browse files
committed
Init task readme
1 parent f636f19 commit a72a5a5

File tree

1 file changed

+60
-0
lines changed

1 file changed

+60
-0
lines changed

README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,63 @@
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+
161
<div align="center">
262
<br>
363
<img

0 commit comments

Comments
 (0)