ASTRO中的指令

吕洞宾的bin
110 阅读3分钟

ASTRO学习之 指令

在Astro中，为了保证性能同时也要保证组件的可交互性，它提供了一些指令，合理利用这些指令可以更好的优化我们的网站。

这些客户端指令（client：*）指令描述了如何激活 ui框架组件（vue，react等ui框架）

  • client:load 在页面加载时，立即加载并激活组件的 JavaScript

  • client:idle 一旦页面完成了初始加载，并触发 requestIdleCallback 事件，就会加载并激活组件中的 JavaScript，不支持 requestIdleCallback，那么就会使用文档 load 事件。

  • **client:visible 一旦组件进入用户的视口，就加载组件的 JavaScript 并使其激活。**其内部使用 IntersectionObserver 来跟踪可见性。

    • 可以通过指定 rootMargin，为底层的 IntersectionObserver 传递 rootMargin 值

  • client:media 满足一定的 CSS 媒体查询条件，就会加载并激活组件的 JavaScript

  • client:only 跳过 HTML 服务端渲染，只在客户端进行加载。

可以添加自定义的 client:* 指令

大概意思就是：这几个指令规定了 ui框架的渲染时机。

Astro 注重内容，性能，弱化Js，通过这些指令可以指定规定js的加载时机，避免非必要的加载，给网站提供更好的性能。

Astro 给这个机制起了个名字：Astro 群岛

如果吧 html，css 比做大海，这其中穿插的一个个 动态UI组件 就像是 一个个的岛屿。

网站大部分内容是静态的，只有这些岛屿是可以互动的。

Astro 群岛的最明显的好处就是性能：

你网站的大部分区域都被转换为了快速、静态的 HTML，JavaScript 只有在需要的时候才会加载到各个组件中。

JavaScript 是一个加载得最慢的资源。每一个字节都影响着阅读者的体验！ 上面这些指令是针对于 UI组件，指定UI组件中js的加载时机。

除了上面这些，Astro还真对 Script 和 Style标签提供了一些指令

<script> 和 <style> 标签的处理

  1. is:global 用 is:global 指令禁用 将 <style> CSS 规则扩展到组件上。 - 看名字也知道，全局css，会影响全局样式

    相当于用 :global() 来封装 <style> 标签内的所有选择器

  2. is:inline 默认的Astro 会处理、压缩和打包它在页面上看到的任何 <script> 和 <style> 标签，而is:inline 指令禁用该行为。将 <script> 或 <style> 标签原封不动地留在最终输出的 HTML 中。

    该令意味着 <style> 和 <script> 标签：

    • 不会被打包到外部文件中。这意味着控制外部文件加载的属性（如 defer）将不起作用。
    • 不会被重复使用——该元素会在渲染时出现多次。
    • 它的 import/@import/url() 引用不基于 .astro 文件地址进行解析。
    • 将进行预处理，例如 <style lang="sass"> 属性仍将生成纯 CSS。
    • 将在最终输出的 HTML 中准确地呈现它所编写的位置。
    • 样式将是全局性的，而不是对组件的范围。

使用变量：

**define:vars,**用 define:vars 相当于使用 is:inline 指令

---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
const message = "Astro is awesome!";
---
<style define:vars={{ textColor: foregroundColor, backgroundColor }}>
  h1 {
    background-color: var(--backgroundColor);
    color: var(--textColor);
  }
</style>

<script define:vars={{ message }}>
  alert(message);
</script>

is:raw 该元素的任何子项都视为文本。这意味着该组件中所有特殊的 Astro 模板语法都不会生效。

avatar
文章
阅读
粉丝