2024前端开发 – 重点专题01 – Astro框架介绍

学习系列目录

热门话题系列


什么是Astro?

Astro(40K star) 是一个为构建内容驱动型网站(如博客、营销和电子商务网站)而设计的Web框架。它的一个显著特点是默认情况下尽可能少地发送客户端JavaScript,除非用户另有指定。这种做法被称为“Islands(岛屿)架构”,它允许开发者在同一个项目中结合使用不同的UI框架,如React、Svelte和Vue。

Astro专注于内容优先、对搜索引擎优化(SEO)友好的网站,以及它提供的良好的开发者体验(DX),这使得它成为构建现代静态Web应用的一个引人注目的选择。

Astro使用的大公司案例和行业反馈

024前端开发
Astro自推出以来,受到了许多大型技术公司的青睐,例如:Google Firebase, MicroSoft Fluent2

“对我们来说,Astro能够生成完全静态的文件非常重要。这对我们非常有利,因为我们希望能够防御多种问题,例如DDoS攻击。因此,拥有一个高度依赖后端服务的产品可能会导致问题。在这个时代,拥有一个完全静态的网站,并将其托管在Azure上,对于安全性和可扩展性来说非常有利。”

— Tudor Popa, 微软工程经理(Fluent 2)

Astro的主要应用场景及优势

Astro最适用于构建快速、高效的静态网站,如博客、文档站点以及营销网站。由于其出色的性能表现,Astro也常被用于电子商务网站的前端开发,以及任何对SEO和加载速度有较高要求的场景。

谷歌的核心网络指标(Core Web Vitals,简称CWV)是一组标准化的三项指标,用以衡量用户在浏览网页时的体验。每个指标分别测量用户体验的不同方面——加载速度、交互响应性和视觉稳定性,三者共同决定了网站的整体性能。

024前端开发

在所有已知使用某一框架构建的网站中,Astro的表现尤为突出,它是唯一一个Google核心网页指标(CWV)合格率超过50%的框架。而SvelteKit也超过了平均合格率(40.5%),其他框架则未能达到这一水平。

Astro的技术原理

Astro框架的技术原理主要基于以下几个方面,这些特性共同定义了Astro的强大性能和开发者体验:

  • 默认情况下不发送任何客户端JavaScript(Ships zero client-side JavaScript by default):Astro默认生成的网站不包含客户端JavaScript代码,使页面加载速度极快,同时提升了网站的总体性能。

  • Islands(组件级部分水合):Astro采用了一个独特的“Islands”架构,允许开发者独立地为需要客户端交互的组件加载JavaScript,而不是整个页面。这一点类似于懒加载,但是在组件级别上实现,从而最大化性能。

  • View Transitions(视图转换):Astro提供了视图过渡和页面切换的功能,即使在一个静态网站中也能实现平滑的用户体验,而这通常仅在客户端JavaScript框架中才能见到。

  • Great DX(出色的开发体验):Astro注重开发者体验,提供了快速的重载、有用的错误消息和丰富的开发文档,确保开发者能够轻松上手并享受编码过程。

  • 官方和用户提交的起始模板和主题:Astro社区及其官方渠道提供了多种起始模板和主题,这使得快速启动新项目变得简单,同时也能够灵活地适应不同的设计需求。

  • 官方和用户提交的集成:Astro提供了广泛的集成支持,包括但不限于对React、Vercel、Tailwind等的支持。这意味着开发者可以轻松地将Astro与他们已经熟悉和喜爱的工具和框架结合起来,无缝地融入现有的工作流程中。

使用Astro构建一个简单的博客站点

以下是构建一个简单Astro博客站点的基本步骤:

为了创建一个使用Astro框架的简单博客网站,你需要遵循以下步骤和目录结构。这里假设你已有基本的Node.js和npm/yarn知识,并已安装在你的开发环境中。

  1. 安装Astro CLI

    npm init astro
    

    或者如果你使用yarn:

    yarn create astro
    

    然后按照提示完成创建新项目的过程。

  2. 项目目录结构

    假设你的博客项目结构如下:

    /src
    ├── /components
    │   └── Tag.astro
    ├── /pages
    │   ├── index.astro
    │   ├── post1.astro
    │   ├── post2.astro
    │   └── post3.astro
    └── /styles
        └── global.css
    
  3. 创建博客文章

    /src/pages/目录下创建.astro文件来表示你的博客文章。例如:

    <!-- src/pages/post1.astro -->
    ---
    // Frontmatter script
    const title = "博客标题1";
    const date = "2024-03-01";
    const tags = ["tag1", "tag2"];
    ---
    <html>
      <head>
        <title>{title}</title>
      </head>
      <body>
        <h1>{title}</h1>
        <p>发布日期: {date}</p>
        <p>这是第一篇博客文章的内容。</p>
        <footer>
          <p>标签:</p>
          {/* 使用Tag组件展示标签 */}
          {tags.map(tag => <Tag tag={tag} />)}
        </footer>
      </body>
    </html>
    

    重复这个过程,创建post2.astropost3.astro

  4. 创建标签组件

    /src/components/目录下创建Tag.astro文件:

    <!-- src/components/Tag.astro -->
    <span class="tag">{props.tag}</span>
    <style>
      .tag {
        background-color: #e0e0e0;
        padding: 5px 10px;
        margin: 2px;
        border-radius: 5px;
      }
    </style>
    
  5. 添加全局样式

    /src/styles/目录下创建global.css

    /* src/styles/global.css */
    body {
      font-family: Arial, sans-serif;
    }
    

    然后在src/pages/index.astro中引入它:

    <!-- src/pages/index.astro -->
    ---
    import "../styles/global.css";
    ---
    <html>
      <head>
        <!-- ... -->
      </head>
      <body>
        <!-- 网站内容 -->
      </body>
    </html>
    
  6. 启动本地开发服务器

    npm run dev
    

    或者如果你使用yarn:

    yarn dev
    
  7. 构建项目

    当你准备将你的网站部署到生产环境时:

    npm run build
    

    或者如果你使用yarn:

    yarn build
    

原文链接:https://juejin.cn/post/7341288345782616105 作者:函数猫FunctionCat

(0)
上一篇 2024年3月2日 下午5:03
下一篇 2024年3月2日 下午5:13

相关推荐

发表回复

登录后才能评论