Экспериментальное сохранение порядка скриптов

Тип: boolean
По умолчанию: false

Добавлено в: astro@5.5.0

Рендерит несколько тегов <style> и <script> в том же порядке, в котором они были объявлены в исходном коде.

Чтобы включить это поведение, добавьте флаг функции experimental.preserveScriptOrder в вашу конфигурацию Astro:

astro.config.mjs

import { defineConfig } from "astro/config"

export default defineConfig({
  experimental: {
    preserveScriptOrder: true
  }
})

Использование

Этот экспериментальный флаг не требует специального использования и влияет только на порядок, в котором Astro рендерит ваши стили и скрипты.

При рендеринге нескольких тегов <style> и <script> на одной странице Astro в настоящее время меняет их порядок в сгенерированном HTML-выводе. Это может привести к неожиданным результатам, например, стили CSS переопределяются ранее определенными тегами стилей при сборке вашего сайта. Этот экспериментальный флаг вместо этого рендерит теги <script> и <style> в порядке их определения.

Например, следующий компонент имеет два тега <style> и два тега <script>:

src/components/MyComponent.astro

<p>Я компонент</p>
<style>
  body {
    background: red;
  }
</style>
<style>
  body {
    background: yellow;
  }
</style>
<script>
    console.log("привет")
</script>
<script>
    console.log("мир!")
</script>

После компиляции поведение Astro по умолчанию создаст встроенный стиль, где yellow появится первым, а затем red. Это означает, что будет применен red фон. Аналогично с двумя скриптами: слово мир! регистрируется первым, а затем привет вторым:

body {background:#ff0} body {background:red}

console.log("мир!")
console.log("привет")

Когда experimental.preserveScriptOrder установлен в true, порядок рендеринга тегов <style> и <script> соответствует порядку, в котором они написаны. Для того же примера компонента стиль, сгенерированный red, появляется первым, а затем yellow; что касается скриптов, привет регистрируется первым, а затем мир!:

body {background:red} body {background:#ff0}

console.log("привет")
console.log("мир!")

В будущей основной версии Astro будет сохранять порядок стилей и скриптов по умолчанию, но вы можете включить будущее поведение раньше, используя флаг experimental.preserveScriptOrder.