Astro
Astro 3.0 đã ra mắt, mang đến những tính năng mới hấp dẫn sẽ đổi mới việc phát triển web. Trong bài viết này, chúng ta sẽ khám phá những điểm nổi bật của Astro 3.0 và tìm hiểu tại sao đây là một bước tiến quan trọng đối với các web framework.
Giới thiệu Astro View Transitions
Một trong những tính năng chính của Astro 3.0 là hỗ trợ API View Transition. Trước đây, loại chuyển tiếp này chỉ khả thi trong JavaScript Single Page Applications (SPAs). Tuy nhiên, Astro 3.0 đưa chúng vào mainstream, làm cho nó trở thành web framework đầu tiên làm điều này. Phải lưu ý rằng View Transition vẫn chưa được hỗ trợ đầy đủ, mới chỉ chạy trên các trình duyệt nhân Chromium.
Với Astro View Transitions, bạn có thể tạo ra các chuyển tiếp mượt mà và liền mạch giữa các trang. Cho dù là hiệu ứng làm mờ, trượt hoặc biến đổi các phần tử, Astro 3.0 giúp bạn dễ dàng tạo ra hiệu ứng hình ảnh tuyệt đẹp trong quá trình điều hướng trang.
Tăng hiệu suất hiển thị nhanh hơn
Hiệu suất hiển thị đã được tăng cường đáng kể trong Astro 3.0. Trên thực tế, hầu hết các thành phần hiện tại hiển thị nhanh hơn 30-75% so với phiên bản trước. Nhóm phát triển Astro đã đầu tư một nỗ lực tái cấu trúc để loại bỏ mã không cần thiết và tối ưu hóa quy trình xây dựng. Kết quả là Astro 3.0 cung cấp tốc độ hiển thị nhanh chóng, tối ưu hóa trải nghiệm người dùng tổng thể.
-> Thông số này do team astro đưa ra, cần thời gian kiểm chứng?
Tối ưu hóa hình ảnh
Tính năng tối ưu hóa hình ảnh trong Astro 3.0 hiện đã được cải thiện và ổn định hơn. Bạn có thể nhập hình ảnh vào dự án của mình bằng cách sử dụng thành phần <Image> tích hợp sẵn. Astro tự động phát hiện và tối ưu hóa từng hình ảnh trong quá trình xây dựng. Ngoài ra, để ngăn chặn sự thay đổi bố cục và cải thiện bảo vệ Cumulative Layout Shift (CLS), Astro thêm các thuộc tính chiều rộng và chiều cao được suy luận vào các thẻ hình ảnh cuối cùng được hiển thị.
Cải tiến SSR cho Serverless
Astro 3.0 giới thiệu các cải tiến mạnh mẽ cho việc server side rendering (SSR). Thông qua việc hợp tác với nhà cung cấp hosting Vercel, Astro hiện hỗ trợ code splitting riêng biệt cho mỗi route. Điều này có nghĩa là mỗi route trong trang web của bạn có thể có các files trên máy chủ nhỏ riêng biệt, giúp cải thiện hiệu suất bằng cách giảm tải các mã không sử dụng trong mỗi yêu cầu.
Hơn nữa, Astro hiện có middleware được bundle để triển khai trên Edge Function, cho phép middleware chạy trên các máy chủ gần với người dùng của bạn, đảm bảo hiệu suất và đáp ứng tối ưu.
Cải thiện HMR cho JSX
Astro 3.0 mang đến những cải tiến lớn cho Hot Module Reloading (HMR) và tính ổn định chung của máy chủ phát triển. React Fast Refresh hiện được hỗ trợ hoàn toàn, cung cấp cập nhật thông minh cho trình duyệt mà không cần làm mới trang hoặc thiết lập lại trạng thái giao diện người dùng (UI). Tính năng này đặc biệt hữu ích cho các giao diện người dùng đa bước, nơi nhà phát triển có thể thay đổi mà không gặp sự hủy bỏ giao diện người dùng, tiết kiệm thời gian và giảm sự phiền toái trong quá trình phát triển.
Optimized Build Output
Astro 3.0 đã thực hiện những cải tiến đáng kể đối với build output. Việc thu gọn (minify) HTML hiện được tự động, dẫn đến kích thước tệp nhỏ hơn và thời gian đáp ứng nhanh hơn. Các ID thành phần hơi rắc rối ở phiên bản trước đã được cải thiện, nâng cao tính dễ đọc và tổ chức chung của HTML. Hơn nữa, Astro 3.0 giờ đây tự động chèn các phần CSS (inline css) nhỏ vào HTML, tăng cường hiệu suất tải trang.
Nâng cấp Astro 3.0
Astro 3.0 hiện đã có sẵn trên npm. Bạn có thể thử Astro 3.0 trong trình duyệt của bạn bằng cách truy cập astro.new hoặc tạo dự án mới bằng cách chạy lệnh sau trong terminal:
npm create astro@latest
Nếu bạn đã có dự án hiện tại, hãy kiểm tra Hướng dẫn nâng cấp v3.0 để có hướng dẫn chi tiết về việc nâng cấp lên Astro 3.0.
Astro 3.0 đang thay đổi việc phát triển web với các tính năng đổi mới và tối ưu hiệu năng. Hãy tiên phong trong tương lai của phát triển web bằng cách ứng dụng Astro 3.0 ngay hôm nay!