WARNING

Эта статья сгенерирована AI и требует ручной доработки.

Производительность и FEOD

Эта статья описывает, как правила FEOD помогают управлять производительностью за счёт структуры, а не фреймворк-специфичных трюков.

1. Разделение по страницам и модулям

Pages — естественные точки входа. Это позволяет легко подключать модули по требованию, а не грузить всё сразу.

// app/router.ts — Vue Router
import { createRouter, createWebHistory } from 'vue-router'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/reports', component: () => import('@/pages/reports.vue') }
  ]
})

При статическом import ReportsPage from '@/pages/reports.vue' страница входит в начальный граф загрузки. Функция import() создаёт точку разделения: роутер загружает страницу при переходе на /reports.

2. Тонкий Common уменьшает размер бандлов

common доступен всем уровням, но сам по себе не загружается целиком. На размер сборки влияют используемые импорты и побочные эффекты зависимостей. Держите common минимальным и переносите тяжёлую логику в модули.

3. Публичный API помогает tree-shaking

Оставляйте публичный API небольшим. ESM-экспорты позволяют сборщику анализировать использование; сам index.ts не гарантирует удаление кода с побочными эффектами.

// modules/Reports/index.ts
export { buildReport } from './api/buildReport'
export type { Report } from './types'

Потребитель использует функцию через публичный API:

// pages/reports.vue — внутри <script setup>
import { buildReport } from '@/modules/Reports'

Это показывает границу импорта. Результат tree-shaking нужно проверять по production-сборке конкретного проекта; этот фрагмент не измеряет размер бандла.

4. Изоляция модулей снижает связность

Когда модули изолированы, их проще загружать отдельно и кэшировать по частям. Глубокие импорты и перекрёстные зависимости разрушают это свойство.

5. Избегайте "монолитных" модулей

Разделение по задачам создаёт удобные границы для отложенной загрузки. Сам перенос файлов в подмодули не меняет объём загрузки без изменения импортов.

modules/
  Analytics/
    modules/
      Events/
      Dashboards/

Например, родительский модуль может экспортировать функцию отложенной загрузки:

// modules/Analytics/index.ts
export async function openDashboard() {
  const { openDashboard } = await import('./modules/Dashboards')
  return openDashboard()
}

modules/Analytics/modules/Dashboards/index.ts экспортирует openDashboard. Этот подмодуль загружается при вызове функции; Events не должен статически импортировать Dashboards.

6. App остаётся лёгким

app должен содержать только запуск, роутинг и интеграции. Чем меньше логики в app, тем меньше кода попадает в критический путь загрузки.