实验性保留脚本顺序

类型: 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 标志启用这一未来行为。