Всем привет!
После последнего видео пришло очень много новых подписчиков в телеграм, что очень круто!
Уже и комьюнити растет и обсуждений и вопросов в комментах много. По возможности стараюсь на все отвечать.
Что ж, сегодня довольно много митингов на работе, поэтому пост будет не такой большой.
Я хотел бы затронуть такую важную тему, как размер добавляемых модулей и как это влияет на ваше приложение.
Решил написать про это после того, как вчера увидел, что у нас на проекте юзается i18next, который весит, 57.5kB minified! Причем тришейкаться это все не будет.
А использовался он лишь для того, чтобы доставать ключи из json. То есть самое смешное то, что для плюрализации была вообще отдельная функция, которая ясен пень не покроет все языки.
Так вот, сейчас в процессе написания своего мини-решения, которе покроет 2 языка (инглиш и арабский). В целом, там все очень просто.
Скорее всего вы сейчас задаете вопрос, Айюб, а почему бы не заюзать готовое решение?
Проблема тут в том, что все пакеты, которые я нашел либо большие и набитые ненужным функционалом. Либо же очень маленькие и простые + не особо популярные. Из-за чего проще держать это у себя.
В случае чего, можно кастомизировать и не надо поддерживать актуальность еще одной зависимости.
Так вот, я предполагаю, что тот человек, который вкручивал эту либу, даже не подумал о всех деталях. Во-первых, если это публичный сайт, то размер бандла очень сильно влияет на время подгрузки.
Асинхронно тут понятное дело не вариант это грузить)
Плюс ко всему, человек не учел, что вообще это либа умеет и нужен ли вообще весь ее функционал. Если это просто какая-то админка для разрабов, то понятное дело - можно сильно не заморачиваться.
Но когда это лендинг или публичная страница - лучше быть более осторожным.
Еще ко всему парсить движку нужно намного больше кода, что может влиять на время инициализации JS.
Собственно, мои советы:
1) Прежде чем добавлять либу, внимательнее ознакомьтесь с ее размером. Оцените, повлияет ли это как-то на ваше приложение. Важный момент - нужна также учитывать, есть ли tree shaking, так как он дает большую разницу.
2) Также стоит ознакомиться с ее функционалом, что есть, а что может быть и не будет. Не стоит забывать про то, насколько хороша она поддерживается и сколько зависимостей имеет сама. В долгосрочной перспективе это может быть очень важным фактором.
3) Всегда стоит посмотреть на альтернативные варианты, не надо торопиться.
4) Я не люблю скачивать либы для 1-й функции на 10-20 строк. Лучше это просто скопировать в проект и оставить так. Если в какой-то момент не подойдет - можно будет поправить. Также -1 пакет, о котором нужно заботиться.
Хорошего дня!
#devtips #performance
После последнего видео пришло очень много новых подписчиков в телеграм, что очень круто!
Уже и комьюнити растет и обсуждений и вопросов в комментах много. По возможности стараюсь на все отвечать.
Что ж, сегодня довольно много митингов на работе, поэтому пост будет не такой большой.
Я хотел бы затронуть такую важную тему, как размер добавляемых модулей и как это влияет на ваше приложение.
Решил написать про это после того, как вчера увидел, что у нас на проекте юзается i18next, который весит, 57.5kB minified! Причем тришейкаться это все не будет.
А использовался он лишь для того, чтобы доставать ключи из json. То есть самое смешное то, что для плюрализации была вообще отдельная функция, которая ясен пень не покроет все языки.
Так вот, сейчас в процессе написания своего мини-решения, которе покроет 2 языка (инглиш и арабский). В целом, там все очень просто.
Скорее всего вы сейчас задаете вопрос, Айюб, а почему бы не заюзать готовое решение?
Проблема тут в том, что все пакеты, которые я нашел либо большие и набитые ненужным функционалом. Либо же очень маленькие и простые + не особо популярные. Из-за чего проще держать это у себя.
В случае чего, можно кастомизировать и не надо поддерживать актуальность еще одной зависимости.
Так вот, я предполагаю, что тот человек, который вкручивал эту либу, даже не подумал о всех деталях. Во-первых, если это публичный сайт, то размер бандла очень сильно влияет на время подгрузки.
Асинхронно тут понятное дело не вариант это грузить)
Плюс ко всему, человек не учел, что вообще это либа умеет и нужен ли вообще весь ее функционал. Если это просто какая-то админка для разрабов, то понятное дело - можно сильно не заморачиваться.
Но когда это лендинг или публичная страница - лучше быть более осторожным.
Еще ко всему парсить движку нужно намного больше кода, что может влиять на время инициализации JS.
Собственно, мои советы:
1) Прежде чем добавлять либу, внимательнее ознакомьтесь с ее размером. Оцените, повлияет ли это как-то на ваше приложение. Важный момент - нужна также учитывать, есть ли tree shaking, так как он дает большую разницу.
2) Также стоит ознакомиться с ее функционалом, что есть, а что может быть и не будет. Не стоит забывать про то, насколько хороша она поддерживается и сколько зависимостей имеет сама. В долгосрочной перспективе это может быть очень важным фактором.
3) Всегда стоит посмотреть на альтернативные варианты, не надо торопиться.
4) Я не люблю скачивать либы для 1-й функции на 10-20 строк. Лучше это просто скопировать в проект и оставить так. Если в какой-то момент не подойдет - можно будет поправить. Также -1 пакет, о котором нужно заботиться.
Хорошего дня!
#devtips #performance
❤29🔥7💯1🍓1
Наткнулся тут на видео от Primagen, где он реагирует на статью про то, как одна строка в tanstack table улучшила перфоманс в 1000 раз.
Сама причина там очевидная, мы разбирали подобные кейсы в моем видео про цену иммутабельности. Однако больше удивило то, что вообще такой код попал в библиотеку и был там столько времени.
Не знаю почему, но по какой-то причине для многих людей в мире JS нормальная практика писать иммутабельный код где попало, даже там, где он ненужен и может повлечь за собой
Понятное дело, что на 20 элементах это вряд ли как-то скажется, но тут ситуация то совсем другая. Это библиотека, тем более для написания таблиц, в том числе и виртуализированных.
Соотвественно, ей нужно расчитывать как минимум на 100к элементов (если объекты не такие большие, то это займет не так много памяти).
В общем, советую всем чуть более осознанно относиться к коду, который вы пишите, и задумываться о его алгоритмической сложности.
Это не значит, что нужно оптимизировать каждую строчку, но хотя бы понимать, что и где сделано не оптимально точно стоит.
P.S. Если не понятно, о чем идет речь - советую прочитать статью либо посмотреть мое видео.
#devtips #performance
Сама причина там очевидная, мы разбирали подобные кейсы в моем видео про цену иммутабельности. Однако больше удивило то, что вообще такой код попал в библиотеку и был там столько времени.
Не знаю почему, но по какой-то причине для многих людей в мире JS нормальная практика писать иммутабельный код где попало, даже там, где он ненужен и может повлечь за собой
O(n^2), а иногда даже и больше.Понятное дело, что на 20 элементах это вряд ли как-то скажется, но тут ситуация то совсем другая. Это библиотека, тем более для написания таблиц, в том числе и виртуализированных.
Соотвественно, ей нужно расчитывать как минимум на 100к элементов (если объекты не такие большие, то это займет не так много памяти).
В общем, советую всем чуть более осознанно относиться к коду, который вы пишите, и задумываться о его алгоритмической сложности.
Это не значит, что нужно оптимизировать каждую строчку, но хотя бы понимать, что и где сделано не оптимально точно стоит.
P.S. Если не понятно, о чем идет речь - советую прочитать статью либо посмотреть мое видео.
#devtips #performance
❤35🔥13👍6💯4⚡2🍓1
Всем привет!
Сегодня готовил материал для видео на ютубе и наткнулся на статью про оптимизации в V8, и как ваш код может на них влиять.
Я думаю некоторые из них вы уже могли знать, а некоторые будут в новинку. Самое главное понимать, что все это работает на основе эвристики и не всегда данные изменения могут принести значимой пользы.
https://web.dev/speed-v8/
#devtips #js #performance
Сегодня готовил материал для видео на ютубе и наткнулся на статью про оптимизации в V8, и как ваш код может на них влиять.
Я думаю некоторые из них вы уже могли знать, а некоторые будут в новинку. Самое главное понимать, что все это работает на основе эвристики и не всегда данные изменения могут принести значимой пользы.
https://web.dev/speed-v8/
#devtips #js #performance
❤10👍4💯2🏆1🍓1