"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "предыстория", "hProperties": { "id": "предыстория" } }, "depth": 2, "value": "Предыстория" }, { "data": { "id": "почему-vite", "hProperties": { "id": "почему-vite" } }, "depth": 3, "value": "Почему Vite?" }, { "data": { "id": "текущее-состояние", "hProperties": { "id": "текущее-состояние" } }, "depth": 2, "value": "Текущее состояние" }, { "data": { "id": "миграция", "hProperties": { "id": "миграция" } }, "depth": 2, "value": "Миграция" }, { "data": { "id": "поддержка-из-коробки", "hProperties": { "id": "поддержка-из-коробки" } }, "depth": 3, "value": "Поддержка из коробки" }, { "data": { "id": "псевдонимы-путей", "hProperties": { "id": "псевдонимы-путей" } }, "depth": 3, "value": "Псевдонимы путей" }, { "data": { "id": "react-fast-refresh-и-hmr", "hProperties": { "id": "react-fast-refresh-и-hmr" } }, "depth": 3, "value": "React Fast Refresh и HMR" }, { "data": { "id": "svg-как-компонент-react", "hProperties": { "id": "svg-как-компонент-react" } }, "depth": 3, "value": "SVG как компонент React" }, { "data": { "id": "sass-модули", "hProperties": { "id": "sass-модули" } }, "depth": 3, "value": "SASS модули" }, { "data": { "id": "поддержка-mdx", "hProperties": { "id": "поддержка-mdx" } }, "depth": 3, "value": "Поддержка MDX" }, { "data": { "id": "поддержка-mermaid-в-рамках-mdx", "hProperties": { "id": "поддержка-mermaid-в-рамках-mdx" } }, "depth": 3, "value": "Поддержка Mermaid в рамках MDX" }, { "data": { "id": "ленивая-загрузка", "hProperties": { "id": "ленивая-загрузка" } }, "depth": 3, "value": "Ленивая загрузка" }, { "data": { "id": "сжатие", "hProperties": { "id": "сжатие" } }, "depth": 3, "value": "Сжатие" }, { "data": { "id": "ручные-чанки", "hProperties": { "id": "ручные-чанки" } }, "depth": 3, "value": "Ручные чанки" }, { "data": { "id": "dev-сервер", "hProperties": { "id": "dev-сервер" } }, "depth": 3, "value": "Dev сервер" }, { "data": { "id": "переменные-среды", "hProperties": { "id": "переменные-среды" } }, "depth": 3, "value": "Переменные среды" }, { "data": { "id": "заключение", "hProperties": { "id": "заключение" } }, "depth": 2, "value": "Заключение" }]; const readingTime = { "minutes": 3, "words": 900, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx("style", { children: `.alt { font-size: 1rem; font-style: italic; font-weight: 500; color: #888; margin-top: 1rem; display: 'block'; }` }), "\n", _jsxs(_components.h2, { id: "предыстория", children: ["Предыстория", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#предыстория", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "У нас есть три основных фронтенд проекта в Logto: интерфейс входа, Консоль и предварительный просмотр в реальном времени. Все эти проекты написаны на TypeScript, React и SASS модулях; в сумме они содержат около 100K строк кода." }), "\n", _jsxs(_components.p, { children: ["Нам нравился Parcel за его простоту и настройку без необходимости конфигурации. Я до сих пор помню день, когда был шокирован, насколько легко было создать новый проект с Parcel. Вы можете просто запустить ", _jsx(_components.code, { children: "parcel index.html" }), " и вуаля, все необходимые зависимости установлены и проект работает. Если ты \"опытный\" разработчик, возможно, ты чувствуешь то же самое, сравнивая это с прежними днями когда нужно было настраивать Gulp и Webpack. Parcel — это настоящая волшебная палочка."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Простота Parcel была основной причиной, по которой мы оставались с ним так долго, несмотря на то, что иногда он был капризным. Например:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel иногда не удавалось объединить проект, поскольку он не мог найти некоторые файлы, которые на самом деле существовали." }), "\n", _jsx(_components.li, { children: "Parcel требовал некоторых хитрых конфигураций, чтобы работать с нашей монорепозиторием." }), "\n", _jsx(_components.li, { children: "Parcel не поддерживает MDX 3 на уровне ядра, поэтому нам пришлось создать для него собственный трансформатор." }), "\n", _jsxs(_components.li, { children: ["Parcel не поддерживает ручные чанки (на момент написания, функция ручных чанков все еще находится ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "на экспериментальной стадии" }), "), что подходит для большинства ситуаций, но иногда это требуется."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Так почему же мы решили перейти на что-то другое?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Мы застряли на версии Parcel 2.9.3, которая была выпущена в июне 2023 года. Каждый раз, когда выпускалась новая версия после этого, мы пытались обновиться, но всегда сталкивались с ошибками сборки." }), "\n", _jsx(_components.li, { children: "Последняя версия Parcel была 2.12.0, выпущенная в феврале 2024 года. Хотя почти ежедневно появляются новые коммиты, с тех пор не было выпущено ни одной новой версии." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Кто-то даже открыл обсуждение, чтобы спросить ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "мертв ли Parcel" }), ". Официальный ответ - нет, Parcel все еще жив, но он находится в состоянии «мы работаем над крупным рефакторингом и у нас нет времени на минорные версии». Для нас это выглядит как «смерть утки»: последнюю версию, которую мы можем использовать, выпустили больше года назад, и мы не знаем, когда выйдет следующая версия. Кажется, что Parcel мертв, он ведет себя как мертвец, так что для нас он мертв."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/parcel_upgrades_238745d26d.png", alt: "Запросы на обновление Parcel" }) }), "\n", _jsx("center", { className: "alt", children: "Поверьте, мы пытались." }), "\n", _jsxs(_components.h3, { id: "почему-vite", children: ["Почему Vite?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#почему-vite", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Мы узнали о ", _jsx(_components.a, { href: "https://vitejs.dev/", children: "Vite" }), " от ", _jsx(_components.a, { href: "https://vitest.dev/", children: "Vitest" }), ". Несколько месяцев назад мы устали от поддержки ESM в Jest (в тестировании) и решили попробовать что-то новое. Vitest покорил наши сердца благодаря поддержке ESM на уровне ядра и совместимости с Jest. У него потрясающий опыт для разработчиков, и его поддерживает Vite."] }), "\n", _jsxs(_components.h2, { id: "текущее-состояние", children: ["Текущее состояние", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#текущее-состояние", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Возможно, у вас в проекте можно настроить по-разному, но обычно вы найдете плагиновые замены, так как экосистема Vite развивается. Вот наши настройки на момент миграции:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Монорепозиторий:" }), " Мы используем рабочие области PNPM (v9) для управления нашей монорепозиторием."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Модуль:" }), " Мы используем ESM модули для всех наших проектов."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " Мы используем TypeScript (v5.5.3) для всех наших проектов с псевдонимами путей."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " Мы используем React (v18.3.1) для всех наших фронтенд проектов."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Стилизация:" }), " Мы используем SASS модули для стилизации."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " Мы используем SVG как компоненты React."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " У нас есть MDX с поддержкой GitHub Flavored Markdown и Mermaid."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Ленивая загрузка:" }), " Нам нужно лениво загружать некоторые страницы и компоненты."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Сжатие:" }), " Мы создаем сжатые файлы (gzip и brotli) для наших продакшн-сборок."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "миграция", children: ["Миграция", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#миграция", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Мы начали процесс миграции, создав новый проект на Vite, и поиграли с ним, чтобы понять, как он работает. Процесс прошел гладко, и реальная миграция заняла всего несколько дней." }), "\n", _jsxs(_components.h3, { id: "поддержка-из-коробки", children: ["Поддержка из коробки", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#поддержка-из-коробки", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Vite поддерживает монорепозитории, ESM, TypeScript, React и SASS из коробки. Нам нужно было только установить необходимые плагины и конфигурации, чтобы все заработало." }), "\n", _jsxs(_components.h3, { id: "псевдонимы-путей", children: ["Псевдонимы путей", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#псевдонимы-путей", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Vite имеет встроенную поддержку псевдонимов путей, например, в нашем ", _jsx(_components.code, { children: "tsconfig.json" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"src/*\"]\n }\n }\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Нам нужно было только добавить такое же разрешение в наш ", _jsx(_components.code, { children: "vite.config.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n resolve: {\n alias: [{ find: /^@\\//, replacement: '/src/' }],\n },\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Обратите внимание, что путь для замены должен быть абсолютным, хотя он относительно корня проекта. Альтернативно, вы можете использовать плагин ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), ", чтобы считывать псевдонимы путей из ", _jsx(_components.code, { children: "tsconfig.json" }), "."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-и-hmr", children: ["React Fast Refresh и HMR", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-и-hmr", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Хотя Vite поддерживает HMR из коробки, для включения React Fast Refresh необходимо установить плагин. Мы использовали плагин ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@vitejs/plugin-react" }), ", который предоставлен командой Vite и отлично поддерживает такие возможности React, как Fast Refresh:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n plugins: [react()],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "svg-как-компонент-react", children: ["SVG как компонент React", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svg-как-компонент-react", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Мы используем плагин ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), ", чтобы конвертировать SVG в компоненты React. Все, что нужно - добавить плагин в конфигурацию Vite:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport svgr from 'vite-plugin-svgr';\n\nexport default defineConfig({\n plugins: [svgr()],\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Однако мы не указали, при каких условиях SVG должен быть преобразован в компоненты React, так что все импорты были конвертированы. Плагин предлагает лучшую конфигурацию по умолчанию: конвертировать только те SVG, которые импортированы с расширением ", _jsx(_components.code, { children: ".svg?react" }), ". Мы обновили наши импорты соответственно."] }), "\n", _jsxs(_components.h3, { id: "sass-модули", children: ["SASS модули", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sass-модули", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Хотя Vite поддерживает SASS модули на уровне ядра, есть одно, на что нам нужно обратить внимание: как форматируются имена классов. Это может вызвать проблемы у пользователей и наши интеграционные тесты, если имена классов будут отформатированы непоследовательно. Одна строка конфигурации в ", _jsx(_components.code, { children: "vite.config.ts" }), " может решить эту проблему:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n css: {\n modules: {\n generateScopedName: '[name]__[local]--[hash:base64:5]', // Замените своим форматом\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "Кстати, Parcel и Vite имеют разные способы импорта SASS файлов:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-diff", children: "- import * as styles from './index.module.scss';\n+ import styles from './index.module.scss';\n" }) }), "\n", _jsxs(_components.p, { children: ["Синтаксис ", _jsx(_components.code, { children: "* as" }), ", однако, работает в Vite, но он приведет к потере модульных имен классов, когда вы используете динамические ключи для доступа к объекту ", _jsx(_components.code, { children: "styles" }), ". Например:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'button';\n// Это не сработает так, как ожидалось\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "поддержка-mdx", children: ["Поддержка MDX", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#поддержка-mdx", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Поскольку Vite использует Rollup под капотом, мы можем использовать официальный плагин ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), ", чтобы поддерживать MDX, а также его плагины. Конфигурация выглядит так:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport mdx from '@mdx-js/rollup';\nimport rehypeMdxCodeProps from 'rehype-mdx-code-props';\nimport remarkGfm from 'remark-gfm';\n\nexport default defineConfig({\n plugins: [\n {\n // `enforce: 'pre'` требуется, чтобы плагин MDX заработал\n enforce: 'pre',\n ...mdx({\n providerImportSource: '@mdx-js/react',\n remarkPlugins: [remarkGfm],\n rehypePlugins: [[rehypeMdxCodeProps, { tagName: 'code' }]],\n }),\n },\n ],\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Плагин ", _jsx(_components.code, { children: "remarkGfm" }), " используется для поддержки GitHub Flavored Markdown, а плагин ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), " - для передачи пропсов к блокам кода в файлах MDX, как это делает ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus" }), "."] }), "\n", _jsxs(_components.h3, { id: "поддержка-mermaid-в-рамках-mdx", children: ["Поддержка Mermaid в рамках MDX", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#поддержка-mermaid-в-рамках-mdx", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Мы хотим использовать диаграммы Mermaid в наших файлах MDX так же, как и другие языки программирования. Использование должно быть таким же простым, как и другие блоки кода:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-md", children: "```mermaid\ngraph TD\n A-->B\n A-->C\n B-->D\n C-->D\n```\n" }) }), "\n", _jsx(_components.p, { children: "Должно рендериться как:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph TD\n A-->B\n A-->C\n B-->D\n C-->D\n" }) }), "\n", _jsx(_components.p, { children: "Поскольку наше приложение поддерживает светлую и темную темы, мы немного закодировали, чтобы заставить диаграммы Mermaid работать с темной темой. Была создана компонента React:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useEffect } from 'react';\nimport useTheme from '@/hooks/use-theme';\n\n// Возможно определено в другом месте\nenum Theme {\n Dark = 'dark',\n Light = 'light',\n}\n\ntype Props = {\n readonly children: string;\n};\n\nconst themeToMermaidTheme = Object.freeze({\n [Theme.Dark]: 'dark',\n [Theme.Light]: 'default',\n} satisfies Record);\n\nexport default function Mermaid({ children }: Props) {\n const theme = useTheme();\n\n useEffect(() => {\n (async () => {\n const { default: mermaid } = await import('mermaid');\n\n mermaid.initialize({\n startOnLoad: false,\n theme: themeToMermaidTheme[theme],\n securityLevel: 'loose',\n });\n await mermaid.run();\n })();\n }, [theme]);\n\n return

{children}

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "useTheme" }), " - это настраиваемый хук для получения текущей темы из контекста. Библиотека ", _jsx(_components.code, { children: "mermaid" }), " импортируется асинхронно, чтобы уменьшить размер загрузки на начальной странице."] }), "\n", _jsx(_components.p, { children: "Для блока кода в файле MDX у нас есть единый компонент, который выполняет работу:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import CodeEditor from '@/components/CodeEditor';\nimport Mermaid from '@/components/Mermaid';\n\ntype Props = {\n readonly children: string;\n readonly className?: string;\n};\n\nexport default function Code({ children, className }: Props) {\n const [, language] = /language-(\\w+)/.exec(String(className ?? '')) ?? [];\n\n if (language === 'mermaid') {\n return {String(children).trimEnd()};\n }\n\n // Другие блоки кода идут сюда\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "Наконец, мы определяем MDX провайдер следующим образом:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { MDXProvider } from '@mdx-js/react';\nimport { ReactNode } from 'react';\n\ntype Props = {\n readonly children: ReactNode;\n};\n\nexport default function MdxProvider({ children }: Props) {\n return (\n ` на\n // настраиваемый компонент.\n // См.: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...другие компоненты\n }}\n >\n {children}\n \n );\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "ленивая-загрузка", children: ["Ленивая загрузка", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ленивая-загрузка", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Это не что-то специфичное для Vite, но все же стоит упомянуть, так как мы обновили наши страницы для использования ленивой загрузки во время миграции, и после этого ничего не сломалось." }), "\n", _jsxs(_components.p, { children: ["React имеет встроенную функцию ", _jsx(_components.code, { children: "React.lazy" }), " для ленивой загрузки компонентов. Однако это может вызвать некоторые проблемы, когда вы быстро итератируете. Мы разработали небольшую библиотеку под названием ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), ", чтобы решить эти проблемы. Она является заменой для ", _jsx(_components.code, { children: "React.lazy" }), ", и подробное объяснение можно найти в этом ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "посте в блоге" }), "."] }), "\n", _jsxs(_components.h3, { id: "сжатие", children: ["Сжатие", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#сжатие", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Существует аккуратный плагин под названием ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), ", чтобы создавать сжатые файлы. Он поддерживает как gzip, так и brotli сжатие. Конфигурация проста:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport viteCompression from 'vite-plugin-compression';\n\nexport default defineConfig({\n plugins: [\n // Gzip по умолчанию\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "ручные-чанки", children: ["Ручные чанки", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ручные-чанки", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Одна из отличных функций Vite (или Rollup, который лежит в его основе) - это ручные чанки. Пока ", _jsx(_components.code, { children: "React.lazy" }), " используется для ленивой загрузки компонентов, мы можем иметь больше контроля над чанками, определяя ручные чанки, чтобы решить, какие компоненты или модули следует объединить вместе."] }), "\n", _jsxs(_components.p, { children: ["Например, мы можем сначала использовать ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "vite-bundle-visualizer" }), ", чтобы проанализировать размер бандла и зависимости. Затем мы можем написать правильную функцию для разделения чанков:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n build: {\n rollupOptions: {\n manualChunks(id, { getModuleInfo }) {\n // Динамически определяем, имеет ли модуль зависимости, связанные с React\n const hasReactDependency = (id: string): boolean => {\n return (\n getModuleInfo(id)?.importedIds.some(\n (importedId) => importedId.includes('react') || importedId.includes('react-dom')\n ) ?? false\n );\n };\n\n // Внимание: Пакеты, связанные с React, должны объединяться вместе, иначе это может вызвать ошибки времени выполнения\n if (id.includes('/node_modules/') && hasReactDependency(id)) {\n return 'react';\n }\n\n // Добавьте ваши большие пакеты в этот список\n for (const largePackage of ['mermaid', 'elkjs']) {\n if (id.includes(`/node_modules/${largePackage}/`)) {\n return largePackage;\n }\n }\n\n // Все остальные пакеты в папке `node_modules` будут объединены вместе\n if (id.includes('/node_modules/')) {\n return 'vendors';\n }\n\n // Используем поведение по умолчанию для других модулей\n },\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "dev-сервер", children: ["Dev сервер", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dev-сервер", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["В отличие от продакшн-сборки, Vite НЕ будет объединять ваш исходный код в режиме разработки (включая связанные зависимости в той же монорепозиторие) и будет обрабатывать каждый модуль как файл. При этом, браузер загрузит сотни модулей впервые, что может выглядеть странно, но в большинстве случаев это совершенно нормально. Вы можете ознакомиться с обсуждением ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "здесь" }), "."] }), "\n", _jsxs(_components.p, { children: ["Если для вас это проблема, альтернативное, но не идеальное решение - указать связанные зависимости в опции ", _jsx(_components.code, { children: "optimizeDeps" }), " файла ", _jsx(_components.code, { children: "vite.config.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n optimizeDeps: {\n include: ['@logto/phrases', '@logto/schemas'],\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "Это \"предварительно объединит\" связанные зависимости и ускорит работу dev сервера. Недостатком является то, что HMR может не работать так, как ожидалось, для связанных зависимостей." }), "\n", _jsxs(_components.p, { children: ["Кроме того, мы используем прокси, который обслуживает статические файлы в продакшене и проксирует запросы на сервер Vitest в режиме разработки. У нас есть несколько настроенных портов для избежания конфликтов, и это также легко настроить в файле ", _jsx(_components.code, { children: "vite.config.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n server: {\n port: 3000,\n hmr: {\n port: 3001,\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "переменные-среды", children: ["Переменные среды", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#переменные-среды", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["В отличие от Parcel, Vite использует современный подход к обработке переменных среды с использованием ", _jsx(_components.code, { children: "import.meta.env" }), ". Он автоматически подгружает ", _jsx(_components.code, { children: ".env" }), " файлы и заменяет переменные в коде. Однако, это требует, чтобы все переменные среды были префиксированы ", _jsx(_components.code, { children: "VITE_" }), " (можно настроить)."] }), "\n", _jsxs(_components.p, { children: ["Когда мы использовали Parcel, он просто заменял переменные ", _jsx(_components.code, { children: "process.env" }), ", не проверяя префикс. Поэтому мы придумали обходной путь, используя поле ", _jsx(_components.code, { children: "define" }), ", чтобы облегчить миграцию:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n define: {\n 'import.meta.env.API_URL': JSON.stringify(process.env.API_URL),\n },\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Это позволяет нам постепенно добавлять префикс к переменным среды и удалять поле ", _jsx(_components.code, { children: "define" }), "."] }), "\n", _jsxs(_components.h2, { id: "заключение", children: ["Заключение", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#заключение", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Вот и все! Мы успешно перенесли наши три фронтенд проекта с Parcel на Vite и надеемся, что эта короткая история поможет вам с вашей миграцией. Вот как конфигурация выглядит в конце:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport svgr from 'vite-plugin-svgr';\nimport mdx from '@mdx-js/rollup';\nimport rehypeMdxCodeProps from 'rehype-mdx-code-props';\nimport remarkGfm from 'remark-gfm';\nimport viteCompression from 'vite-plugin-compression';\n\nexport default defineConfig({\n resolve: {\n alias: [{ find: /^@\\//, replacement: '/src/' }],\n },\n server: {\n port: 3000,\n hmr: {\n port: 3001,\n },\n },\n plugins: [\n react(),\n svgr(),\n {\n enforce: 'pre',\n ...mdx({\n providerImportSource: '@mdx-js/react',\n remarkPlugins: [remarkGfm],\n rehypePlugins: [[rehypeMdxCodeProps, { tagName: 'code' }]],\n }),\n },\n viteCompression(),\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n css: {\n modules: {\n generateScopedName: '[name]__[local]--[hash:base64:5]',\n },\n },\n build: {\n rollupOptions: {\n manualChunks(id, { getModuleInfo }) {\n // Логика ручных чанков\n },\n },\n },\n});\n" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };