К чему обращается import в production коде

К чему обращается import в production коде

import в production коде — это не то же самое, что в исходном коде. Во время сборки (bundling) все import-ы преобразуются в реальные объекты, функции и значения, которые существуют в runtime.

Путь от разработки к production

1. Исходный код (Development)

// src/components/Button.tsx
import React from 'react';
import { cn } from '@/lib/utils';
import { fetchUser } from '@/api/users';
import styles from './Button.module.css';

export function Button() {
  // ...
}

Здесь import — это просто синтаксис ES modules. Браузер и Node.js не могут выполнить этот код напрямую.

2. Сборка (Build time)

Bundler (Webpack, Vite, Turbopack) анализирует граф зависимостей:

Button.tsx
  ├── react (node_modules/react/index.js)
  ├── lib/utils.ts (src/lib/utils.ts)
  ├── api/users.ts (src/api/users.ts)
  └── Button.module.css (стили)

Все файлы объединяются в bundle.

3. Production код (Runtime)

Import преобразуется в реальные ссылки на объекты в памяти:

// Примерный результат после bundling
const React = require('react'); // Или ссылка на объект React в памяти
const { cn } = require('./lib/utils'); // Функция из utils.ts
const { fetchUser } = require('./api/users'); // Функция из users.ts

function Button() {
  // React уже инициализирован и готов к использованию
  // cn — это функция
  // fetchUser — это функция
}

Механизм работы import в runtime

1. Базовая логика: объект в памяти

Когда вы пишете:

import { getUserName } from '@/api/users';

В production это становится ссылкой на функцию, которая уже загружена в памяти:

// В глобальном "модульном пространстве" bundler'а
const modules = {
  'api/users.ts': {
    getUserName: function() { /* реальный код */ }
  },
  'components/Button.tsx': {
    Button: function() { /* реальный код */ }
  }
};

// Когда ты используешь getUserName, ты ссылаешься на
// modules['api/users.ts'].getUserName

2. Рассмотрим более сложный пример

// src/api/users.ts
export function getUserName(id) {
  return fetch(`/api/users/${id}`).then(r => r.json());
}

export const API_URL = 'https://api.example.com';

// src/components/Profile.tsx
import { getUserName, API_URL } from '@/api/users';

export function Profile({ userId }) {
  return (
    <div>
      {getUserName(userId)} at {API_URL}
    </div>
  );
}

В production:

// После bundling это примерно так (в упрощённом виде):

// Объект модуля api/users
const usersModule = {
  getUserName: function(id) {
    return fetch(`/api/users/${id}`).then(r => r.json());
  },
  API_URL: 'https://api.example.com'
};

// Объект модуля components/Profile  
const profileModule = {
  Profile: function({ userId }) {
    return React.createElement('div', null,
      usersModule.getUserName(userId),
      ' at ',
      usersModule.API_URL
    );
  }
};

// Когда компонент рендерится, React вызывает profileModule.Profile

Как работает import разных типов значений

1. Функции

// utils.ts
export function formatDate(date) {
  return date.toLocaleDateString();
}

// main.ts
import { formatDate } from './utils';

// В runtime: formatDate — это ссылка на функцию в памяти
console.log(formatDate(new Date())); // Вызов функции

2. Классы

// User.ts
export class User {
  constructor(name) {
    this.name = name;
  }
}

// main.ts
import { User } from './User';
const user = new User('Иван');

// В runtime: User — ссылка на конструктор класса
// new User() создаёт новый экземпляр

3. Объекты и переменные

// config.ts
export const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

// main.ts
import { config } from './config';

// В runtime: config — это ссылка на объект в памяти
console.log(config.apiUrl); // Доступ к свойству

4. Массивы и примитивы

// constants.ts
export const COLORS = ['red', 'blue', 'green'];
export const MAX_USERS = 100;

// main.ts
import { COLORS, MAX_USERS } from './constants';

// В runtime:
// COLORS — ссылка на массив в памяти
// MAX_USERS — примитив (число), скопированное значение

Как bundler разрешает импорты

// Исходный код
import Button from './Button';
import { cn } from '@/lib/utils';

// Bundler создаёт mapping:
{
  './Button': { default: ButtonComponent },
  '@/lib/utils': { cn: cnFunction }
}

// И заменяет импорты на доступ к этому объекту
const Button = __webpack_require__('./Button').default;
const { cn } = __webpack_require__('@/lib/utils');

Next.js и Server Components

В Next.js 13+ есть Server Components, которые работают иначе:

// app/page.tsx (Server Component)
import { getUser } from '@/lib/db';

// Этот import выполняется НА СЕРВЕРЕ во время SSR/SSG
// getUser может быть асинхронной и обращаться к БД
export default async function Page() {
  const user = await getUser(1);
  return <h1>{user.name}</h1>;
}

У Server Components import обращается к серверным модулям, а не браузерным.

Tree-shaking и Dead Code Elimination

Bundler может оптимизировать импорты:

// utils.ts
export function usedFunction() { return 'used'; }
export function unusedFunction() { return 'unused'; }

// main.ts
import { usedFunction } from './utils';

// В production bundler удалит unusedFunction (если конфигурация это поддерживает)
// Это называется tree-shaking

Dynamic imports

Динамические импорты (lazy loading) работают иначе:

// Статический импорт (загружается с основным бандлом)
import Button from './Button';

// Динамический импорт (загружается по требованию)
const Button = await import('./Button');

// В production:
// - Статический: Button доступен сразу
// - Динамический: загружается отдельный chunk когда нужен

Условный импорт (НЕ рекомендуется)

// ❌ Плохая практика
if (typeof window === 'undefined') {
  // const backend = require('@/api/backend');
}

// ✅ Хорошая практика (в Next.js)
import dynamic from 'next/dynamic';
const Component = dynamic(
  () => import('./heavy-component'),
  { ssr: false }
);

Практический пример: trace import в React

// src/lib/hooks.ts
export function useCounter() {
  const [count, setCount] = React.useState(0);
  return [count, setCount];
}

// src/components/Counter.tsx
import { useCounter } from '@/lib/hooks';
import React from 'react';

export function Counter() {
  const [count, setCount] = useCounter();
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// src/pages/index.tsx
import { Counter } from '@/components/Counter';

export default function Home() {
  return <Counter />;
}

В production:

1. React загружается в память как модуль
2. useCounter загружается как функция
3. Counter загружается как компонент React
4. Home загружается как корневой компонент
5. Когда React рендерит Home, он вызывает Counter
6. Когда Counter вызывает useCounter, он обращается к функции в памяти

Отладка: что на самом деле импортируется

console.log(typeof Button); // 'function'
console.log(Button.toString()); // Вернёт минифицированный код
console.log(Button.name); // 'Button' (или '_Button' если минифицирован)

// Для объектов
console.log(Object.keys(config)); // ['apiUrl', 'timeout']

Итог

В production коде import обращается к объектам и функциям, которые уже загружены в памяти во время сборки приложения. Bundler преобразует import-ы из ES6 синтаксиса в реальные ссылки на значения в "модульном хранилище", которое создаёт bundler.