Стаття

Отримано 02.04.2025

Доопрацьовано 12.05.2025

Прийнято 28.06.2025

Взято з Том 29, № 1, 2025

Сторінки 12 -19

Bezverkhiy, O., & Dedul, O. (2025). Designing an optimized blog application. The National Transport University Bulletin, 29(1), 12-19. https://doi.org/10.33744/2308-6645-2025-1-60-012-019

Проектування оптимізованого блог-додатку

Олександр Безверхий Олександр Дедул

У роботі проаналізовано сучасні технології оптимізації front-end розробки, включаючи налаштування інфраструктури проекту, модульну архітектуру та підходи до оптимізації продуктивності. Досліджено використання інструментів для конфігурації проекту, таких як Webpack, Vite, та Babel, з метою зменшення розміру бандла та підвищення швидкодії. Впроваджено оптимізацію за допомогою code splitting, lazy loading та кешування запитів. Об’єкт дослідження: процес оптимізації front-end розробки у сучасних блог-додатках. Мета роботи: дослідити сучасні методи та технології оптимізації процесів front-end розробки, їх інтеграцію в реальний проект та оцінити ефективність впроваджених рішень. У роботі проаналізовано сучасні підходи до організації інфраструктури front-end проектів, включаючи використання модульних систем, а також гнучких підходів до конфігурації середовища розробки. Розроблено комплексну архітектуру для масштабованих веб-додатків, яка базується на принципах модульності, слабкої зв'язаності та повторного використання компонентів. Здійснено конфігурацію проекту з використанням таких інструментів, як ESLint для лінтингу коду, Jest для тестування, JSON Server для емуляції API, TypeScript для статичної типізації, а також React для створення користувацького інтерфейсу. Досліджено методи оптимізації бандла, включаючи розділення коду (code splitting), ліниве завантаження (lazy loading) та використання бандл-аналізаторів. Це дозволило визначити найбільш ефективні методи для створення оптимальної інфраструктури, яка підтримує гнучкість, масштабованість і зручність розробки

front-end; оптимізація; webpack; vite; babel; typescript; ui-компоненти; темізація; i18n; lazy loading; code splitting; redux; entityadapter; react; storybook; скріншотні тести; модульна архітектура; асинхронні редюсери

1. Douglas Crockford. JavaScript: Strengths. – Kharkiv: "Faktor" Publishing House, 2018. – 200 p.

2. Deshmukh S. Building a Single Page Application Web Front-end for E-Learning site [Electronic resource] / S. Deshmukh, A. Retawade, D. Mane – Resource access mode: https://ieeexplore.ieee.org /document/8819703/authors#authors

3. React Documentation. [Online resource] – Access mode: https://reactjs.org/docs/gettingstarted.html

4. Jest Documentation. [Online resource] – Access mode: https://jestjs.io/docs/getting-started

5. Analyzing best practices on Web development frameworks: The lift approach [Electronic resource] / [M. PilarSalas-Zárate, G. Alor-Hernández, R. Valencia-García, et al.] – Resource access mode: https://www.sciencedirect.com/science/article/pii/S0167642314005735

6. Babel Documentation. [Online resource] – Access mode: https://babeljs.io/docs/en/ 

https://doi.org/10.33744/2308-6645-2025-1-60-012-019