实验性保留脚本顺序

类型：boolean
默认：false

¥Type: boolean
Default: false

Added in: astro@5.5.0 新

按照在源代码中声明的顺序渲染多个 <style> 和 <script> 标签。

¥Renders multiple <style> and <script> tags in the same order as they were declared in the source code.

要启用此行为，请将 experimental.preserveScriptOrder 功能标志添加到 Astro 配置：

¥To enable this behavior, add the experimental.preserveScriptOrder feature flag to your Astro config:

astro.config.mjs

import { defineConfig } from "astro/config"

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

用法

标题部分 用法

¥Usage

此实验性标志不需要特定用法，只会影响 Astro 渲染样式和脚本的顺序。

¥This experimental flag requires no specific usage and only affects the order in which Astro renders your styles and scripts.

在同一页面上渲染多个 <style> 和 <script> 标签时，Astro 目前会在你生成的 HTML 输出中反转它们的顺序。这可能会导致意外结果，例如，在构建站点时，CSS 样式会被先前定义的样式标签覆盖。此实验性标志会按照定义顺序渲染 <script> 和 <style> 标签。

¥When rendering multiple <style> and <script> tags on the same page, Astro currently reverses their order in your generated HTML output. This can give unexpected results, for example, CSS styles being overridden by earlier defined style tags when your site is built. This experimental flag instead renders <script> and <style> tags in the order they are defined.

例如，以下组件有两个 <style> 标签和两个 <script> 标签：

¥For example, the following component has two <style> tags and two <script> tags:

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：

¥After compiling, Astro’s default behavior will create an inline style where yellow appears first, and then red. This means the red background is applied. Similarly with the two scripts, the word world! is logged first, and then hello second:

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

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

当 experimental.preserveScriptOrder 设置为 true 时，<style> 和 <script> 标签的渲染顺序与它们的写入顺序相匹配。对于相同的示例组件，生成的样式 red 首先出现，然后是 yellow；至于脚本，首先记录 hello，然后记录 world!：

¥When experimental.preserveScriptOrder is set to true, the rendering order of <style> and <script> tags matches the order in which they are written. For the same example component, the style generated red appears first, and then yellow; as for the scripts, hello is logged first, and then world!:

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

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

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

¥In a future major version, Astro will preserve style and script order by default, but you can opt in to the future behavior early using the experimental.preserveScriptOrder flag.