Hiệu suất nâng cao và phát triển hợp lý
Với việc phát hành phiên bản mới nhất, Svelte 4, khung JavaScript nổi tiếng để phát triển ứng dụng web đã có một bước tiến lớn. Bản cập nhật này mang đến một loạt cải tiến thú vị, với trọng tâm chính là tối ưu hóa hiệu suất và nâng cao trải nghiệm của nhà phát triển.
Mục Lục
Nhỏ hơn và độc lập hơn
Một trong những cải tiến đáng chú ý nhất là việc giảm đáng kể kích thước tổng thể. Từ 10,6 MB khổng lồ, kích thước của Svelte giờ đây mỏng hơn nhiều 2,8 MB, giảm 75% kích thước một cách ấn tượng.
Ngoài ra, nhóm đằng sau khung JavaScript Svelte đã sắp xếp hợp lý số lượng phụ thuộc từ 61 xuống còn 16. Việc giảm này có nhiều lợi thế, bao gồm trải nghiệm REPL nhanh hơn, tương tác nâng cao trên các trang web và thực hiện cài đặt npm nhanh hơn đáng kể, bất kể trình quản lý gói bạn thích.
Ngoài tối ưu hóa kích thước gói, Svelte cũng đã tinh chỉnh mã mà nó tạo ra để hydrat hóa. Chẳng hạn, mã cho trang web SvelteKit hiện là 110,2 kB từ 126,3 kB, giảm 13%.
Trải nghiệm nhà phát triển nâng cao
Svelte hiện đặt các chuyển đổi thành cục bộ theo mặc định, đảm bảo rằng chúng không phải là toàn cầu theo mặc định. Điều này giảm thiểu nguy cơ can thiệp vào các quá trình chuyển đổi khác và ngăn ngừa xung đột trong quá trình tải trang, mang lại trải nghiệm người dùng mượt mà hơn.
Thành phần web
Việc tạo các Thành phần Web trong Svelte giờ đây trở nên đơn giản bằng cách sử dụng phiên bản mới
<svelte:options tag="my-component" />
Mặc dù cách tiếp cận này tỏ ra dễ sử dụng trong các trường hợp đơn giản, nhưng nó đặt ra các hạn chế đối với các tình huống nâng cao hơn như kiểm soát xem các giá trị chỗ dựa được cập nhật có phản ánh trong DOM hay vô hiệu hóa DOM bóng hay không.
Svelte 4 đã cách mạng hóa trải nghiệm tác giả của Thành phần web với việc giới thiệu thuộc tính customElement chuyên dụng trong mảnh dẻ: tùy chọn. Thuộc tính này cho phép bạn định cấu hình Thành phần Web với nhiều tùy chọn khác nhau:
<svelte:options
customElement={{
tag: 'custom-element',
shadow: 'none',
props: {
name: {
<!-- Reflects the updated value back to the DOM -->
reflect: true, <!-- Reflects the value as a number -->
type: 'Number',
<!-- Name of the attribute -->
attribute: 'element-index'
}
}
}}
/>
<script>
export let elementIndex;
</script>
Các loại nghiêm ngặt hơn
tạoEventDispatcher bây giờ kiểm tra các tham số được cung cấp để biết tính chính xác về loại và số lượng, đồng thời đưa ra các lỗi liên quan tương ứng:
import { createEventDispatcher } from 'svelte';const dispatch = createEventDispatcher<{
optional: number | null;
required: string;
noArgument: never;
}>();
dispatch('optional');
dispatch('required');
dispatch('noArgument', 'surprise');
dispatch('optional');
dispatch('required');
dispatch('noArgument', 'surprise');
Hoạt động Và Hành độngTrở về bây giờ mặc định cho một loại tham số của không bao giờ nếu như Hoạt động không có loại chung được cung cấp:
const untyped: Action = (node, params) => {
}const typed: Action<HTMLElement, string> = (node, params) => {
}
onMount bây giờ yêu cầu trả về của nó là một chức năng đồng bộ, vì một chức năng không đồng bộ có thể dẫn đến lỗi nếu cuộc gọi lại chạy khi hủy. Đây là trường hợp chỉ dành cho các chức năng đồng bộ:
onMount(async () => {
const bar = await foo();
return cleanup();
});
onMount(() => {
foo().then(bar => );
return cleanup();
});
Di chuyển dễ dàng
Quá trình chuyển đổi từ Svelte 3 sang Svelte 4 thật dễ dàng nếu bạn sử dụng công cụ di chuyển được cập nhật của nhóm. Bạn có thể nâng cấp bằng lệnh sau:
npx svelte-migrate@latest svelte-4
Cần lưu ý các yêu cầu phiên bản tối thiểu được cập nhật:
- NodeJS 16 trở lên
- SvelteKit 1.20.4 trở lên
- TypeScript 5 trở lên
Những gì mong đợi từ Svelte 5
Cho đến nay, có rất ít thông tin về các tính năng sắp ra mắt trong Svelte 5. Tuy nhiên, vì Svelte được liên kết chặt chẽ với ESLint nên kích thước gói của nó cũng bị ảnh hưởng.
Quá trình viết lại ESLint đang diễn ra sẽ giảm hơn 50% kích thước gói vào thời điểm Svelte 5 phát hành.
Nắm bắt tương lai của Svelte
Svelte 4 tạo tiền đề cho một quá trình phát triển mượt mà và hiệu quả hơn. Nó mở đường cho những khả năng thậm chí còn thú vị hơn trong bản phát hành Svelte 5 sắp tới.
Với khuôn khổ tiếp tục phát triển và thích ứng với nhu cầu phát triển của bạn, tương lai có vẻ tươi sáng cho những người đam mê Svelte và những người muốn sử dụng khả năng của nó để xây dựng các ứng dụng web sáng tạo.
Khi bạn nắm bắt sức mạnh của khung JavaScript Svelte 4, bạn sẽ có vị trí tốt để tạo các ứng dụng tiên tiến mang lại trải nghiệm người dùng đặc biệt.