Какие методы используете для организации JavaScript файлов в проекте?

Проблема с управлением JS файлами

В современной веб-разработке приходится работать с огромным количеством JavaScript библиотек и собственных скриптов. На одной странице может быть десятки различных JS файлов.

Что меня беспокоит:

  • Как правильно структурировать все эти файлы
  • Какой подход выбрать для минификации кода
  • Как автоматизировать процесс сборки
  • Стоит ли объединять все скрипты в один файл или разделять по модулям

Пример текущей структуры:

// main.js
function initializeApp() {
    loadUserInterface();
    setupEventHandlers();
}

// utils.js
function formatDateTime(timestamp) {
    return new Date(timestamp).toLocaleDateString();
}

// api.js
function fetchUserData(userId) {
    return fetch(`/api/users/${userId}`);
}

Какие инструменты и методологии вы используете для решения этих задач? Буду благодарен за практические советы и примеры из реальных проектов.

Раньше тоже мучался с этим. Теперь Rollup для библиотек, Vite для приложений - работает быстрее webpack’а. Source maps обязательно настрой. Структура: всё в /src, подпапки по функционалу. Большие файлы - зло, используй code splitting. Tree shaking отлично чистит мертвый код.

Пробовал ли ты использовать webpack или vite? Мои файлы были в беспорядке, пока я не перешел на ES6 модули. Теперь каждый компонент в своем файле, а сборщик оптимизирует все. Какой у тебя размер проекта?