Vue Academy · Урок

Удаление неиспользуемого кода и автоматический импорт

Именованные экспорты для удаления неиспользуемого кода, интеграция unplugin-vue-components и настройка resolver

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

Что такое исключение неиспользуемого кода

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

Именованные экспорты делают это возможным

Используйте именованные экспорты во входной точке, чтобы каждый импорт можно было проанализировать статически. Один экспорт по умолчанию, содержащий всё (объект общего входного файла), нельзя оптимизировать таким образом.

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

Избегайте объекта общего экспорта по умолчанию

Экспорт одного объекта со всеми компонентами заставляет сборщики сохранять их все, даже если приложение использует только один.

// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };

Пользователь импортирует необходимое

При использовании именованных экспортов пользователь выбирает только нужные компоненты, а остальные удаляются из его сборки.

import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundled

Поле sideEffects

Сборщики предполагают, что модули могут иметь побочные эффекты, и сохраняют их. Установка "sideEffects": false в package.json сообщает им, что ваши модули чистые и их безопасно удалить.

{
  "sideEffects": false
}

Объявление побочных эффектов CSS

Если ваш пакет содержит импорты CSS, которые нельзя удалять, укажите их, чтобы сохранить только их.

{
  "sideEffects": ["**/*.css"]
}

Автоматический импорт для пользователей

Чтобы избавить пользователей от ручного импорта, библиотеки поставляют разрешатель для unplugin-vue-components, который автоматически импортирует компоненты, используемые в шаблонах.

npm install -D unplugin-vue-components

Предоставление разрешателя

Разрешатель — это функция, которая по имени используемого компонента возвращает путь, откуда его нужно импортировать. Поставьте такой разрешатель вместе с пакетом.

// my-ui-lib/resolver.js
export function MyUiResolver() {
  return {
    type: "component",
    resolve: (name) => {
      if (name.startsWith("My")) {
        return { name, from: "my-ui-lib" };
      }
    }
  };
}

Конфигурация пользователя

Пользователь регистрирует плагин с вашим разрешателем. Теперь компоненты, используемые в шаблонах, импортируются автоматически и по-прежнему оптимизируются.

// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [MyUiResolver()] })
  ]
});

Автоматический импорт и исключение неиспользуемого кода

Поскольку разрешатель превращает использование шаблона в настоящие именованные импорты, в сборку включаются только используемые компоненты — вы получаете и удобство, и небольшие сборки.

Избегайте глобальной регистрации

Библиотека, автоматически регистрирующая все компоненты через app.use, лишает сборщик возможности удалять неиспользуемый код. Предпочитайте именованные экспорты и необязательный разрешатель, чтобы пользователи сами подключали нужные компоненты.

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

Какая настройка package.json сообщает сборщикам, что ваши модули безопасно оптимизировать?

Итоги

Включите исключение неиспользуемого кода с помощью именованных экспортов (никогда не используйте объект общего экспорта по умолчанию) и настройки "sideEffects": false (или перечислите CSS). Для удобства поставьте разрешатель unplugin-vue-components, чтобы пользователи автоматически импортировали используемые компоненты, сохраняя в сборке только необходимое, и не навязывайте глобальную регистрацию.

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

Урок «Удаление неиспользуемого кода и автоматический импорт» бесплатный?

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

Чему я научусь в уроке «Удаление неиспользуемого кода и автоматический импорт»?

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

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

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

Сколько времени занимает урок «Удаление неиспользуемого кода и автоматический импорт»?

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

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

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

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

Настройка библиотечного режима Vite
Объявления TypeScript для библиотек компонентов
Удаление неиспользуемого кода и автоматический импорт
Публикация в npm и семантическое версионирование

← Назад к Vue Academy