Архитектура фронтенда

Пайплайны сборки: чтение конфигов и сниппетов

Суть Читай реальные конфиги сборки и поле package.json, предсказывай поведение bundler-а и выбирай фикс наибольшего рычага для tree-shaking, mode, source map и инлайна env.

Высота — путь к senior

НольJuniorMiddleSenior

Ты на senior-высоте — в орбите

◷ 14 min

Проблемы сборки диагностируются в конфиге и манифесте пакета, а не в работающем приложении. Прочитай каждый сниппет, предскажи, что bundler с ним сделает, и выбери фикс, который senior сделает первым.

Цель

Отработай цикл, который ты гоняешь на каждой регрессии сборки: прочитай конфиг, предскажи, где утекают байты или где расходятся dev и prod, и потянись за точным полем — sideEffects, mode, sourcemap, manualChunks, env — которое чинит корень.

Сниппет 1 — объявление sideEffects

{
  "name": "@acme/ui",
  "module": "dist/index.js",
  "sideEffects": false,
  "exports": { ".": "./dist/index.js" }
}

Пакет поставляет dist/styles.css, который компоненты импортируют ради стилей, например import "./button.css" в начале Button.js.

Викторина

Потребитель сообщает, что часть стилей компонентов пропадает в его production-сборке. Что вызывает это значение sideEffects и каков фикс?

Сниппет 2 — режим dev vs prod и NODE_ENV

// webpack.config.js
module.exports = {
  mode: "development",
  // ...loaders, plugins...
};

Команда гоняет ровно этот конфиг в CI, чтобы получить артефакт, который деплоит в production.

Викторина

Задеплоенный бандл ~в 3 раза больше ожидаемого, а React пишет development-предупреждения в проде. Что не так и каков фикс наибольшего рычага?

Сниппет 3 — source map в production

// vite.config.js
export default {
  build: {
    sourcemap: false,
  },
};

Прод кидает ошибку, и стек-трейс читается как index-a1b2c3.js:1:88431. Трекер ошибок показывает тот же нечитаемый фрейм.

Викторина

Нужны читаемые prod-стек-трейсы в трекере ошибок без раскрытия исходника публично. Какая настройка правильная?

Сниппет 4 — manualChunks и инлайн env

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: { vendor: ["react", "react-dom"] },
      },
    },
  },
};

Ревьюер также замечает, что клиентский компонент читает process.env.API_SECRET, чтобы вызвать внутренний API.

Викторина

Какое утверждение об этом конфиге верно?

Итог

Каждая регрессия сборки читается в конфиге: sideEffects: false должен перечислять реально нечистые файлы (вроде CSS), иначе bundler их выкинет; production надо собирать в режиме production, чтобы запустились минификация и dead-code-elimination веток под NODE_ENV; source map место в режиме ‘hidden’, чтобы трекер ошибок получил читаемость без публичного раскрытия; vendor заслуживает свой manualChunks-чанк ради стабильности кэша; а любое значение env, упомянутое в клиентском коде, инлайнится во время сборки, поэтому секреты не должны касаться клиента. Прочитай поле, предскажи вывод, почини корень.

Продолжить восхождение ↑Пайплайны сборки: аудит и упрочнение реальной сборки