5 tính năng mới để thử trong Astro 2.5

AstroJS là một công cụ dựa trên JavaScript tuyệt vời được sử dụng để tạo các trang web tĩnh cực nhanh. Nó cho phép bạn tạo các trang web bằng nhiều khung JavaScript như React, Vue và Svelte. Astro 2.5 mang đến một bộ tính năng hoàn toàn mới, một số tính năng sẽ được đề cập ở đây.

1. Thu thập dữ liệu

Astro 2.5 hiện hỗ trợ lưu trữ JSON và YAML trong các bộ sưu tập. Thuộc tính type: ‘data’ mới kích hoạt chức năng này. Để chứng minh điều này, hãy tạo bộ sưu tập dữ liệu ‘người viết’ trong thư mục src/content, trong đó JSON hoặc YAML tập tin có thể được thêm vào.

Tiếp theo, định cấu hình các bộ sưu tập trong src/content/config.ts bằng cách sử dụng định nghĩaCollection Và z tiện ích từ astro:nội dung mô-đun và đặt loại thành data.

 import { z, defineCollection } from "astro:content";
const writers = defineCollection({
  type: "data",
  schema: z.object({ name: z.string() }),
});
 

Cuối cùng, xuất đối tượng bộ sưu tập để đăng ký bộ sưu tập của bạn.

 export const collections = {writers:writers}
 

2. Rút gọn HTML

Astro 2.5 giới thiệu tùy chọn nénHTML loại bỏ tất cả các khoảng trắng (và ngắt dòng) khỏi HTML của bạn. Các thành phần chỉ được nén một lần bởi trình biên dịch Astro và sau đó trong quá trình xây dựng. Điều này được thực hiện để giảm chi phí hiệu suất.

Kích hoạt tùy chọn này trong dự án của bạn thật dễ dàng. Chỉ cần thêm các dòng sau vào tệp cấu hình của bạn. Thu nhỏ HTML chỉ hoạt động với các thành phần được viết ở định dạng tệp .astro.

 export default defineConfig({compressHTML:true})
 

3. Kết xuất song song

Kết xuất các thành phần song song là một tính năng được chờ đợi từ lâu trong Astro. Trong trường hợp các thành phần con trong các cây con khác nhau tìm nạp dữ liệu, Astro 2.5 cải thiện thời gian tải bằng cách tìm nạp dữ liệu song song.

Điều này cho phép một thành phần nằm sâu hơn trong cây được hiển thị mà không bị chặn bởi một thành phần tìm nạp dữ liệu cao hơn trong cây. Hiện tại, kết xuất song song không hoạt động bình thường với mảng.map các đoạn không đồng bộ.

Astro 2.5 cũng mang đến một bộ tính năng thử nghiệm hoàn toàn mới được đề cập bên dưới.

4. Kết xuất lai

Giờ đây, Astro 2.5 cho phép bạn xác định tùy chọn đầu ra máy chủ mới trong tệp cấu hình của mình. Tùy chọn này sẽ ghi đè hành vi kết xuất trước mặc định của SSR.

Để tận dụng kết xuất kết hợp, hãy đặt đầu ra lai thành true trong phần thử nghiệm của cấu hình của bạn và thêm bộ điều hợp.

Làm điều này sẽ hiển thị trước toàn bộ trang web của bạn theo mặc định, nhưng bạn có thể từ chối hành vi này bằng cách đặt kết xuất trước xuất bất kỳ tuyến đường hoặc trang nào thành false:

 export const prerender = false; 

5. Chỉ thị khách hàng tùy chỉnh

Astro 2.5 giới thiệu API addClientDirective để kiểm soát hydrat hóa thành phần phía máy khách tùy chỉnh bằng tùy chỉnh khách hàng:* chỉ thị.

Để sử dụng tính năng này, Kích hoạt thử nghiệm.customClientDirectives trong tệp cấu hình và giữ các điểm nhập chỉ thị ở mức tối thiểu để tránh mọi tác động tiêu cực đến quá trình hydrat hóa thành phần.

Một chức năng của loại ClientDirective nên được xuất từ ​​tệp chỉ thị ứng dụng khách của bạn. Ví dụ: đoạn mã sau hydrat hóa thành phần trong lần nhấp đầu tiên vào cửa sổ.

 import { ClientDirective } from "astro";
const clickDirective: ClientDirective = (load, opts, el) => {
  window.addEventListener(
    "click",
    async () => {
      const hydrate = await load();
      await hydrate();
    },
    { once: true }
  );
};
export default clickDirective;
 

Hiện nay khách hàng: nhấp chuột có thể được sử dụng trong các thành phần của bạn với sự hỗ trợ đầy đủ.

Cách cài đặt Astro

Astro cung cấp Giao diện dòng lệnh (CLI) được gọi là tạo astro để giúp bạn bắt đầu. Bạn cần cài đặt NodeJS 16+ và npm trên máy của mình.

 npm create astro@latest 

Điều này sẽ tạo ra một dự án Astro mới từ đầu. Thực hiện theo các hướng dẫn trên màn hình để thiết lập mọi thứ (nếu bạn không chắc chắn nên chọn gì, chỉ cần chọn các tùy chọn được đề xuất). Kế tiếp, đĩa CD vào thư mục dự án, sau đó chạy:

 npm run dev
 

Bạn có thể thêm các khung như React, sử dụng astro thêm. Nếu mọi thứ được cài đặt chính xác, bạn có thể mở máy chủ cục bộ:3000 trên máy của bạn và bạn sẽ thấy thông báo “Chào mừng đến với Astro”.

Nếu không thích NPM, bạn có thể chọn các Trình quản lý gói JavaScript khác như Yarn và PNPM.

Nâng cao trải nghiệm của nhà phát triển với Astro

Các Framework tất cả trong một như Astro giúp việc phát triển các trang web nhanh trở nên mượt mà nhất có thể. Thật tuyệt vời, bản chất không liên quan đến giao diện người dùng có nghĩa là bạn có thể làm việc với bất kỳ khung JavaScript phổ biến nào mà bạn chọn mà không gặp rắc rối nào.