Vue Academy · Урок

Оптимизация процесса сборки

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

Урок 1 из 313 шагов

«Оптимизация процесса сборки» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

От разработки до рабочей среды

Во время разработки вы запускаете сервер разработки с горячей перезагрузкой. Для публикации вы создаёте оптимизированную сборку для рабочей среды: набор статических файлов, настроенных для высокой скорости и небольшого размера и готовых к развёртыванию на любом хостинге.

Запуск сборки

Стандартная команда собирает ваше приложение для рабочей среды. Vite (стандартный набор инструментов Vue 3) компилирует, объединяет и оптимизирует всё содержимое.

npm run build

Результат сборки

Сборка записывает оптимизированные файлы в папку dist: файл index.html, хешированные пакеты JavaScript и CSS, а также ваши статические ресурсы. Именно эту папку вы развёртываете.

dist/
  index.html
  assets/
    index-a1b2c3.js
    index-d4e5f6.css

Минификация

Минификация удаляет пробелы и комментарии и сокращает имена переменных, чтобы файлы загружались быстрее. Сборки для рабочей среды автоматически минифицируют JavaScript и CSS.

Удаление неиспользуемого кода

Удаление неиспользуемого кода убирает код, который вы никогда не используете. Если вы импортируете из библиотеки одну функцию, сборщик удаляет остальной код. Используйте именованные импорты модулей ES, чтобы удаление неиспользуемого кода работало.

// only what you use is bundled
import { debounce } from "lodash-es"

Хеширование содержимого

Имена файлов в результате сборки включают хеш содержимого, например index-a1b2c3.js. При изменении кода хеш меняется, поэтому браузеры загружают новый файл, а неизменившиеся файлы активно используют из кэша.

Анализ размера пакета

Чтобы увидеть, что занимает место в вашем пакете, используйте плагин визуализации. Он создаёт интерактивную диаграмму, показывающую, какие модули занимают больше всего места, и помогает определить направления оптимизации.

npm install -D rollup-plugin-visualizer

Чтение результатов анализа

Большая зависимость, которой вы почти не пользуетесь, — тревожный сигнал. Анализ может выявить объёмную библиотеку для работы с датами или построения диаграмм, которую можно заменить более компактной альтернативой или загружать отложенно.

Переменные среды

Vite предоставляет переменные среды с префиксом VITE_ через import.meta.env. Используйте их, чтобы настраивать адреса API и флаги функций для каждой среды.

// .env.production
// VITE_API_URL=https://api.example.com

const apiUrl = import.meta.env.VITE_API_URL

Сборки для разных сред

Vite загружает .env.production во время выполнения npm run build и .env.development во время выполнения npm run dev, поэтому каждая среда автоматически получает правильную конфигурацию.

// .env.development -> VITE_API_URL=http://localhost:3000
// .env.production  -> VITE_API_URL=https://api.example.com

Предварительный просмотр сборки

Перед развёртыванием запустите локальный предварительный просмотр сборки для рабочей среды, чтобы убедиться, что она работает ожидаемым образом с настоящими оптимизированными файлами.

npm run build
npm run preview

Быстрая проверка

Проверьте свои знания о процессе сборки.

Ответь в интерактивном уроке

Итоги

Запустите npm run build, чтобы получить оптимизированную папку dist с минифицированными ресурсами, из которых удалён неиспользуемый код и имена которых содержат хеш содержимого. Анализируйте размер пакета, чтобы уменьшить объёмные зависимости, и используйте переменные среды VITE_ вместе с файлами .env для настройки каждой среды. Перед публикацией выполните предварительный просмотр. Далее вы развернёте эту сборку на платформе хостинга.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Оптимизация процесса сборки» бесплатный?

Да — полный текст урока «Оптимизация процесса сборки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Оптимизация процесса сборки»?

Создавайте оптимизированные сборки для рабочего окружения Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Оптимизация процесса сборки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy