Vite FAQ

Медленная холодная загрузка с помощью Vite

Это ожидаемое поведение. Мы добавляем больше функций, что означает, что у нас есть от 2 до 8 строк кода по сравнению с @vuepress/theme-default в зависимости от используемых вами функций. Таким образом, ожидается, что транспиляция и отправка кода темы и плагинов в браузер увеличится с 0.8s - 2s в @vuepress/theme-default до 3s - 10s (диапазон зависит от производительности машины).

Бремя тряски деревьев

Чтобы полностью поддерживать Tree-shaking в функциональности и стилях, темы и плагины выполняют дополнительную работу, включая модульность, частичное внедрение, создание временных файлов и т. д. Эти дополнительные функции обеспечивают удаление неиспользуемого кода функции на этапе сборки, но также означает, что необходимо выполнить больше логики и загрузить больше фрагментированных файлов в режиме разработки.

Чувак, ты не можешь рассчитывать на полную поддержку древовидной структуры и при этом быть очень быстрым при запуске сервера разработки, они противоречивы.

система стилей

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

• @vuepress/theme-default помещает все стили вместе в папку styles и полностью их импортирует, так что sass нужно будет скомпилировать только один раз, а vite нужно будет отправить только 1 дополнительный веб-запрос. Вот почему это быстро.

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

• vuepress-theme-hope связывает стили с компонентами, но это означает, что sass должен компилировать стили для каждого компонента, а vite должен отправлять дополнительный запрос для каждого компонента. Из-за того, что vuepress-theme-hope имеет от 2 до 6 компонентов (в зависимости от того, активируете ли вы функции блога или нет), по сравнению с @vuepress/theme-default это займет дополнительное время 2.4s - 4s для этого.

  Но таким образом вы можете легко переопределить компонент вместе с его стилями.

Таким образом, по вышеуказанным причинам у vuepress-theme-hope будет в среднем в 4 раза больше кода и в 10 раз больше запросов по сравнению с @vuepress/theme-default, поэтому время увеличивается с 2s до 10s разумно и ожидаемо.

Не влияет на HMR и скорость онлайн

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

• Эти дополнительные накладные расходы не влияют на HMR, поэтому при редактировании файла Markdown ответ HMR страницы может оставаться на уровне 100 мс.

• Неиспользуемый код будет удален на этапе сборки при проектировании скважины, поэтому производственная среда обычно добавляет только дополнительные 200–500 КБ размера в запись JS по сравнению с темой по умолчанию и около 100 мс дополнительного времени выполнения скрипта, поэтому влияние онлайн очень маленький.

@import() в CSS не работает

В VuePress2 импорт веб-CSS через @import в index.scss не имеет никакого эффекта. Возможно, вам придется вручную импортировать его в параметр head вашей конфигурации VuePress.

TS

import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  head: [
    [
      "link",
      {
        rel: "stylesheet",
        href: "YOUR_CSS_URL",
      },
    ],
  ],

  // ...
});

JS

export default {
  head: [
    [
      "link",
      {
        rel: "stylesheet",
        href: "YOUR_CSS_URL",
      },
    ],
  ],

  // ...
};

Причина

1. CSS, импортированный через @import в Sass, будет скомпилирован в стандартный синтаксис CSS @import.
2. Синтаксис CSS @import работает только в верхней части файла css.
3. Чтобы придать пользовательским стилям более высокий приоритет, мы будем импортировать пользовательские стили после стилей темы и плагинов.
4. Во время сборки приложения VuePress2 все стили сжимаются в один файл CSS.

Вышеприведенное приводит к тому, что пользовательский импорт CSS @import в Sass появляется в середине окончательного файла CSS и, следовательно, недействителен.

Тема по умолчанию также имеет ту же проблему, и это не может быть исправлено на стороне темы.