Préservation expérimentale de l'ordre des scripts

Type : boolean
Par défaut : false

Ajouté à la version : astro@5.5.0 Nouveau

Restitue plusieurs balises <style> et <script> dans le même ordre que celui dans lequel elles ont été déclarées dans le code source.

Pour activer ce comportement, ajoutez l’option de fonctionnalité experimental.preserveScriptOrder à votre configuration Astro :

astro.config.mjs

import { defineConfig } from "astro/config"

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

Utilisation

Titre de la section Utilisation

Cette option expérimentale ne nécessite aucune utilisation spécifique et affecte uniquement l’ordre dans lequel Astro restitue vos styles et scripts.

Lors du rendu de plusieurs balises <style> et <script> sur la même page, Astro inverse actuellement leur ordre dans le HTML généré. Cela peut produire des résultats inattendus, par exemple, des styles CSS remplacés par des balises de style précédemment définies lors de la création de votre site. Cette option expérimentale restitue quant à elle les balises <script> et <style> dans l’ordre dans lequel elles sont définies.

Par exemple, le composant suivant possède deux balises <style> et deux balises <script> :

src/components/MyComponent.astro

<p>Je suis un composant</p>
<style>
  body {
    background: red;
  }
</style>
<style>
  body {
    background: yellow;
  }
</style>
<script>
    console.log("hello")
</script>
<script>
    console.log("world!")
</script>

Après la compilation, le comportement par défaut d’Astro crée un style en ligne où yellow apparaît en premier, puis red. Cela signifie que l’arrière-plan red est appliqué. De même, avec les deux scripts, le mot world! est affiché en premier, suivi de hello :

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

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

Lorsque experimental.preserveScriptOrder est définie sur true, l’ordre de restitution des balises <style> et <script> correspond à leur ordre d’écriture. Pour le même composant d’exemple, le style généré red apparaît en premier, suivi de yellow ; pour les scripts, hello est affiché en premier, suivi de world! :

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

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

Dans une future version majeure, Astro conservera le style et l’ordre des scripts par défaut, mais vous pouvez opter pour le comportement futur plus tôt en utilisant l’option experimental.preserveScriptOrder.