Оптимизация приложений: Тришейкинг
Тришейкинг (Tree Shaking) – это процесс удаления неиспользуемого кода из вашего конечного бандла. В контексте JavaScript и фронтенд разработки, это означает, что сборщики модулей, такие как Webpack или Rollup, анализируют ваш код на предмет экспортов, которые нигде не используются, и не включают их в итоговый файл. Это позволяет существенно уменьшить размер бандла, что положительно сказывается на времени загрузки приложения. Например, если вы импортировали библиотеку, но использовали только одну функцию из нее, тришейкинг позволит исключить из бандла все остальные неиспользуемые функции.
Как работает тришейкинг:
1. Вы объявляете импорты и экспорты в каждом модуле.
2. Сборщик (Webpack, Rollup или другой) во время сборки анализирует дерево зависимостей.
3. Неиспользуемый код исключается из итогового бандла.
Порядок настройки (на примере Webpack):
1. Убедитесь, что используете версию Webpack, поддерживающую тришейкинг (обычно это версия 2 и выше).
2. В вашем
3. Используйте ES6 модули (`import` и `export`), так как тришейкинг работает только с ними.
Бывают спрашивают вопрос на собеседовании. Вообще вопросы по оптимизации частенько задаю. Думаю расскажу вам о них в постах.
Тришейкинг (Tree Shaking) – это процесс удаления неиспользуемого кода из вашего конечного бандла. В контексте JavaScript и фронтенд разработки, это означает, что сборщики модулей, такие как Webpack или Rollup, анализируют ваш код на предмет экспортов, которые нигде не используются, и не включают их в итоговый файл. Это позволяет существенно уменьшить размер бандла, что положительно сказывается на времени загрузки приложения. Например, если вы импортировали библиотеку, но использовали только одну функцию из нее, тришейкинг позволит исключить из бандла все остальные неиспользуемые функции.
Как работает тришейкинг:
1. Вы объявляете импорты и экспорты в каждом модуле.
2. Сборщик (Webpack, Rollup или другой) во время сборки анализирует дерево зависимостей.
3. Неиспользуемый код исключается из итогового бандла.
Порядок настройки (на примере Webpack):
1. Убедитесь, что используете версию Webpack, поддерживающую тришейкинг (обычно это версия 2 и выше).
2. В вашем
webpack.config.js установите mode в значение production. Это автоматически включит тришейкинг.3. Используйте ES6 модули (`import` и `export`), так как тришейкинг работает только с ними.
Бывают спрашивают вопрос на собеседовании. Вообще вопросы по оптимизации частенько задаю. Думаю расскажу вам о них в постах.
🔥11👍6💯1
Задача с собеседования в Сбер. Вилка от 200к
Каким будет вывод этого фрагмента кода?
Выходным результатом будетstart , middle, 1 , end и success.
console.log('start')
const fn = () => (new Promise((resolve, reject) => {
console.log(1);
resolve('success')
}))
console.log('middle')
fn().then(res => {
console.log(res)
})
console.log('end')
Каким будет вывод этого фрагмента кода?
Выходным результатом будет
🔥17👍8💯1
Реализуйте функцию curry.
Каррирование (currying) — это процесс преобразования функции с множеством аргументов в последовательность функций, каждая из которых принимает один аргумент.
Вот такие задачки тоже на собесах бывают
Каррирование (currying) — это процесс преобразования функции с множеством аргументов в последовательность функций, каждая из которых принимает один аргумент.
Вот такие задачки тоже на собесах бывают
function curry(func) {
return function curried(...args) {
if (args.length >= func.length) {
return func.apply(this, args);
} else {
return function(...args2) {
return curried.apply(this, args.concat(args2));
}
}
};
}
function sum(a, b, c) {
return a + b + c;
}
const curriedSum = curry(sum);
console.log(curriedSum(1, 2)(3)); // Также выведет 6
console.log(curriedSum(1)(2, 3)); // И это тоже выведет 6
👍9🫡3🔥2🤝2
Всем привет, может кто сталкивался с рабством в IT? Поделитесь историями и как выходили из него?
Ситуация: человек заключил договор с галерой, уволиться не может, придется заплатить 500к штраф.
Как такие ситуации решаются?
Ситуация: человек заключил договор с галерой, уволиться не может, придется заплатить 500к штраф.
Как такие ситуации решаются?
😢11👍2❤1💯1
Кстати, ребята! Со следующей недели можно начать путь в новую жизнь. Если вам нравится разработка и вы хотите стать Frontend-разработчиком, грамотно пройти путь обучения, много практиковаться и готовиться к собеседованиям, то у меня есть для вас отличное предложение.
Если вы хотите попасть в сообщество единомышленников, где ребята на разных этапах идут к своей цели, если вы хотите трудоустроиться, получать достойную зарплату и быть частью дружелюбного, прогрессивного IT-сообщества, то я могу вам помочь.
Я знаю актуальные требования и вопросы к собеседованиям, еженедельно обновляю базу вопросов и задач. В рамках менторства у нас проводятся многочисленные онлайн-мероприятия на различные темы, от технических до простого общения и холиваров. Все записи сохраняются, и вы можете в любой момент их посмотреть.
Приходите на менторство — это максимально эффективный вид обучения, и еще по низкой цене. Подробности в личных сообщениях или по ссылке:
@ruslan_kuyanets
Подробности о менторстве
Если вы хотите попасть в сообщество единомышленников, где ребята на разных этапах идут к своей цели, если вы хотите трудоустроиться, получать достойную зарплату и быть частью дружелюбного, прогрессивного IT-сообщества, то я могу вам помочь.
Я знаю актуальные требования и вопросы к собеседованиям, еженедельно обновляю базу вопросов и задач. В рамках менторства у нас проводятся многочисленные онлайн-мероприятия на различные темы, от технических до простого общения и холиваров. Все записи сохраняются, и вы можете в любой момент их посмотреть.
Приходите на менторство — это максимально эффективный вид обучения, и еще по низкой цене. Подробности в личных сообщениях или по ссылке:
@ruslan_kuyanets
Подробности о менторстве
❤5👍4🔥3
Мотивация.
Мое сознание не видит, что я могу проиграть. Конечно, у всех есть сомнения, но именно они помогают достигать новых высот. Когда ты думаешь, что недостаточно хорош, не стоит сдаваться. Нужно работать над собой, чтобы стать лучше. Это касается всего. Сомнения удерживают тебя в зале, заставляют делать дополнительные упражнения. Они побуждают перечитать конспект еще раз, хотя ты уже собирался ложиться спать.
Главное — уметь отбросить эти сомнения в важный день, потому что к этому моменту ты уже сделал все возможное.
Мое сознание не видит, что я могу проиграть. Конечно, у всех есть сомнения, но именно они помогают достигать новых высот. Когда ты думаешь, что недостаточно хорош, не стоит сдаваться. Нужно работать над собой, чтобы стать лучше. Это касается всего. Сомнения удерживают тебя в зале, заставляют делать дополнительные упражнения. Они побуждают перечитать конспект еще раз, хотя ты уже собирался ложиться спать.
Главное — уметь отбросить эти сомнения в важный день, потому что к этому моменту ты уже сделал все возможное.
👍25🔥5💯4🤔2
Всем привет, недавно был на собеседовании😅
Вот такие вопросы были:
1. Расскажи про Event Loop. Макро- и Микротаски. К чему относятся eventListeners?
2. Что такое Promise? Какие есть методы? Async await.
3. setTimeut 3 секунды в Promise. Отработает ли? Через сколько?
4. Расскажи про мемоизацию. Про оптимизацию React приложений. Запросы на сервер. Рассуждаем по React.Memo. Debouncing. useCallback и useMemo. Ленивая загрузка + и -.
5. Ситуация: у тебя много данных, ты отрисовываешь компонент, но он подлагивает. Твое действия для разрешения ситуации.
6. Виртуализация. Расскажи как реализовать, для чего нужна?
7. Стейт менеджеры. Зачем такой зоопарк? Какие использовал? Redux vs MobX vs Signals. Рассуждаем по Стейт менеджерам.
Дальше лайвкодинг:
- Две алгозадачи с Leet Code
- Одна задача на реализацию React приложения.
Если интересно, выложу задачи на днях.
Собеседование прошло хорошо. Не готовился к самопрезентации и растерялся. Долго рассказывал и не по делу. По вопросам ответил все. Задачи решил все. Собеседование шло 2.5 часа😱
Атмосфера была топовая, очень приятно пообщались с собеседующим Алексеем. Много рассуждали, обсудили проблемы Redux. Собеседование не было душным, за это и спасибо🤝
Вот такие вопросы были:
1. Расскажи про Event Loop. Макро- и Микротаски. К чему относятся eventListeners?
2. Что такое Promise? Какие есть методы? Async await.
3. setTimeut 3 секунды в Promise. Отработает ли? Через сколько?
4. Расскажи про мемоизацию. Про оптимизацию React приложений. Запросы на сервер. Рассуждаем по React.Memo. Debouncing. useCallback и useMemo. Ленивая загрузка + и -.
5. Ситуация: у тебя много данных, ты отрисовываешь компонент, но он подлагивает. Твое действия для разрешения ситуации.
6. Виртуализация. Расскажи как реализовать, для чего нужна?
7. Стейт менеджеры. Зачем такой зоопарк? Какие использовал? Redux vs MobX vs Signals. Рассуждаем по Стейт менеджерам.
Дальше лайвкодинг:
- Две алгозадачи с Leet Code
- Одна задача на реализацию React приложения.
Если интересно, выложу задачи на днях.
Собеседование прошло хорошо. Не готовился к самопрезентации и растерялся. Долго рассказывал и не по делу. По вопросам ответил все. Задачи решил все. Собеседование шло 2.5 часа😱
Атмосфера была топовая, очень приятно пообщались с собеседующим Алексеем. Много рассуждали, обсудили проблемы Redux. Собеседование не было душным, за это и спасибо🤝
👍42🔥11🤝4
Сообщество.
Люди по своей природе стремятся к объединению и принадлежности к группам. Это основа человеческой психологии и социальной динамики. Сообщества играют ключевую роль в удовлетворении этой потребности, предлагая платформу для взаимодействия и поддержки.
Сообщества — это группы людей, объединенных общими интересами, целями или ценностями. Такие объединения позволяют людям делиться опытом и развиваться вместе.
Сообщества создают атмосферу взаимоподдержки и мотивации. Встречи с единомышленниками становятся источником вдохновения и энергии. В сообществе легче достигать целей и интереснее развиваться.
Моя цель — создать такое сообщество, где каждый участник, включая меня, сможет развиваться и творить. Я хочу собрать группу единомышленников, с которыми откроется множество возможностей для роста и достижения новых высот.
Люди по своей природе стремятся к объединению и принадлежности к группам. Это основа человеческой психологии и социальной динамики. Сообщества играют ключевую роль в удовлетворении этой потребности, предлагая платформу для взаимодействия и поддержки.
Сообщества — это группы людей, объединенных общими интересами, целями или ценностями. Такие объединения позволяют людям делиться опытом и развиваться вместе.
Сообщества создают атмосферу взаимоподдержки и мотивации. Встречи с единомышленниками становятся источником вдохновения и энергии. В сообществе легче достигать целей и интереснее развиваться.
Моя цель — создать такое сообщество, где каждый участник, включая меня, сможет развиваться и творить. Я хочу собрать группу единомышленников, с которыми откроется множество возможностей для роста и достижения новых высот.
"Люди объединяются в сообщества, чтобы преодолевать трудности и достигать успеха." — Джон Ф. Кеннеди
👍8❤5🔥5
Задача с собеседования №1
Напишите функцию, которая принимает две строки str и substr и возвращает массив всех индексов, с которых начинаются анаграммы строки substr в строке str.
Жду решения в комментариях 👍
Позже выложу как я решил эту задачу
Напишите функцию, которая принимает две строки str и substr и возвращает массив всех индексов, с которых начинаются анаграммы строки substr в строке str.
// Входные данные:
let str = "cbacbebabacd";
let substr = "abc";
// Выходные данные:
[0, 5]
Жду решения в комментариях 👍
Позже выложу как я решил эту задачу
👍6🔥4💯2
Вообще, к собеседованиям помогает готовиться этот канал @frontend_questions. Его ведут ребята с YeaHub, я тоже периодически накидываю темы. Так что можете смело подписываться, канал из экосистемы Reactify & YeaHub 💪
👍5🔥3❤2😁1
Знаете, о чем я еще подумал? У меня никогда не было агрессивной рекламы менторства. Когда у меня появляется возможность взять учеников, я просто делаю пару нейтральных постов, и ко мне сразу приходят ребята. Пока все довольны. 😊 Так что если вдруг нужна помощь в обучении, обращайтесь. 🤝 Даже пару месяцев с ментором — огромный буст! А цены ниже некуда👌
https://react-mentor.notion.site/Frontend-a92c7b7d0d664e7297e2fa3d6acb2c26
https://react-mentor.notion.site/Frontend-a92c7b7d0d664e7297e2fa3d6acb2c26
🔥6👍5❤2
Задача с собеседования №1
Напишите функцию, которая принимает две строки str и substr и возвращает массив всех индексов, с которых начинаются анаграммы строки substr в строке str.
Кстати, условие задачи было неправильным, так как 0 и 5 не могут быть индексами начала анаграмм 🤔
Решение задачи на картинке✔️
Напишите функцию, которая принимает две строки str и substr и возвращает массив всех индексов, с которых начинаются анаграммы строки substr в строке str.
Кстати, условие задачи было неправильным, так как 0 и 5 не могут быть индексами начала анаграмм 🤔
Решение задачи на картинке
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🤝3🔥2
Паттерн Стратегия в JavaScript. Продвинутый Frontend на реальных примерах
В этом видео мы рассмотрим Паттерн Стратегия (Strategy) в контексте JavaScript и Frontend разработки.
Для проекта Рецептов используем Webpack, JavaScript.
Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом JavaScript и паттернах проектирования.
Видео уже на канале! Третий серия видеокурса
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
В этом видео мы рассмотрим Паттерн Стратегия (Strategy) в контексте JavaScript и Frontend разработки.
Для проекта Рецептов используем Webpack, JavaScript.
Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом JavaScript и паттернах проектирования.
Видео уже на канале! Третий серия видеокурса
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
👍11🔥4💯2
Задача с собеседования №2
Есть массив массивов, где каждый внутренний массив представляет собой диапазон дней (включительно) в виде [начало, конец]. Нужно найти день, в который было наибольшее количество клиентов.
Пример:
Для массива [[1, 5], [2, 10], [1, 2]], выход должен быть 2, так как день 2 содержится в трех диапазонах.
Жду решения в комментариях 👍
Позже выложу как я решил эту задачу
Есть массив массивов, где каждый внутренний массив представляет собой диапазон дней (включительно) в виде [начало, конец]. Нужно найти день, в который было наибольшее количество клиентов.
Пример:
Для массива [[1, 5], [2, 10], [1, 2]], выход должен быть 2, так как день 2 содержится в трех диапазонах.
Жду решения в комментариях 👍
Позже выложу как я решил эту задачу
👍2🔥2🤝1
О сообществе
Ребята, 1 июля я открываю двери в сообщество. Это будет максимально полезное место. Идея, которую я реализую за июль, уникальна — такого нет нигде. Это сообщество с большим количеством возможностей для каждого участника.
Сейчас я формирую страницу сообщества, всё готово на 80 процентов. Прилагаю ссылку на одну из страниц для ознакомления.
Читать о пользе
Ребята, 1 июля я открываю двери в сообщество. Это будет максимально полезное место. Идея, которую я реализую за июль, уникальна — такого нет нигде. Это сообщество с большим количеством возможностей для каждого участника.
Сейчас я формирую страницу сообщества, всё готово на 80 процентов. Прилагаю ссылку на одну из страниц для ознакомления.
Читать о пользе
👍12❤3🔥3🤝2
TypeScript с 0 до Профи. Полный курс + Практика [2023]
40.000 просмотров!🎉🚀
https://youtu.be/PYWaUwjofJo?si=4diZp6os0htSJgKq
40.000 просмотров!🎉🚀
https://youtu.be/PYWaUwjofJo?si=4diZp6os0htSJgKq
👍17🔥10🤝4
О сообществе
Моя идея — сформировать центральное место для всех IT-специалистов. Мы достигнем этой цели в Telegram, а затем и на YeaHub. Я хочу создать платформу — единую точку сбора для единомышленников и всех айтишников.
Что будет в сообществе? Всё, что поможет вам развиваться в IT без курсов и самостоятельно. Такого количества мероприятий и возможностей нет нигде. Никто не предоставит столько полезного контента. Наш календарь уже ломится от изобилия активностей, и в планах ещё больше.
Объединение в команды, митапы, общение, групповые собеседования, подкасты и челенджи. Большая база знаний и эксклюзивный контент. Найдите хотя бы одно сообщество, где есть всё это, — такого нет.
Для меня нет конкурентов среди тех, кто хочет вести свой блог и приносить пользу новичкам. В сообществе я хочу сформировать большую сеть авторов, объединиться, помогать в их начинаниях, делать совместные проекты. Помогать в продвижении, делиться опытом. Участники смогут стать авторами сообщества, а в будущем — YeaHub. И вместе мы будем приносить пользу для сообщества.
В июле будет создан Telegram-бот. Суть будет в том, чтобы за активность давать рейтинг и баллы членам сообщества. Эти баллы будут отражать вклад каждого, мотивировать и позволять их обменивать.
Будет очень круто, весело и энергично. Давайте развиваться вместе! Сообщество мотивирует и помогает.
Моя идея — сформировать центральное место для всех IT-специалистов. Мы достигнем этой цели в Telegram, а затем и на YeaHub. Я хочу создать платформу — единую точку сбора для единомышленников и всех айтишников.
YeaHub — это не просто платформа, а место, где профессионалы IT-индустрии общаются, обмениваются опытом и вдохновляют друг друга на новые достижения.
Что будет в сообществе? Всё, что поможет вам развиваться в IT без курсов и самостоятельно. Такого количества мероприятий и возможностей нет нигде. Никто не предоставит столько полезного контента. Наш календарь уже ломится от изобилия активностей, и в планах ещё больше.
Объединение в команды, митапы, общение, групповые собеседования, подкасты и челенджи. Большая база знаний и эксклюзивный контент. Найдите хотя бы одно сообщество, где есть всё это, — такого нет.
Для меня нет конкурентов среди тех, кто хочет вести свой блог и приносить пользу новичкам. В сообществе я хочу сформировать большую сеть авторов, объединиться, помогать в их начинаниях, делать совместные проекты. Помогать в продвижении, делиться опытом. Участники смогут стать авторами сообщества, а в будущем — YeaHub. И вместе мы будем приносить пользу для сообщества.
В июле будет создан Telegram-бот. Суть будет в том, чтобы за активность давать рейтинг и баллы членам сообщества. Эти баллы будут отражать вклад каждого, мотивировать и позволять их обменивать.
Будет очень круто, весело и энергично. Давайте развиваться вместе! Сообщество мотивирует и помогает.
👍14🔥5❤2