实验性功能：保留脚本顺序

类型： 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>I am a component</p>
<style>
  body {
    background: red;
  }
</style>
<style>
  body {
    background: yellow;
  }
</style>
<script>
    console.log("hello")
</script>
<script>
    console.log("world!")
</script>

编译后，Astro 的默认行为将创建一个内联样式，其中 yellow 出现在前，red 在后。这意味着将应用 red 背景。对于两个脚本也是如此，单词 world! 会先被打印，然后才是 hello。

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

console.log("world!")
console.log("hello")

当 experimental.preserveScriptOrder 设置为 true 时，<style> 和 <script> 标签的渲染顺序将与它们的书写顺序相匹配。对于相同的示例组件，生成的样式中 red 在前，yellow 在后；至于脚本，hello 会先被打印，然后才是 world!。

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

console.log("hello")
console.log("world!")

在未来的主版本中，Astro 将默认保留样式和脚本的顺序，但你可以使用 experimental.preserveScriptOrder 标志提前选择加入此未来行为。