Chrome đang hợp tác với các khung nguồn mở để hướng tới một môi trường web tốt đẹp hơn
Chrome là một bên tích cực đóng góp cho hệ sinh thái khung web và bài nói chuyện của chúng tôi tại Hội nghị thượng đỉnh Chrome Dev năm 2019 đề cập đến những gì chúng tôi đã thực hiện trong năm qua.
Hãy đọc tiếp để xem bản tóm tắt mở rộng về buổi nói chuyện, cùng với các thông tin chi tiết và tài nguyên bổ sung.
Làm cách nào để cải thiện web?
Mục tiêu của mọi người trong nhóm Chrome là cải thiện web. Chúng tôi nỗ lực cải thiện các API trình duyệt và V8 (công cụ WebAssembly và JavaScript cốt lõi hỗ trợ Chrome) để nhà phát triển có thể sử dụng các tính năng giúp họ tạo ra những trang web tuyệt vời. Chúng tôi cũng cố gắng cải thiện những trang web hiện đang hoạt động bằng cách đóng góp cho các công cụ nguồn mở theo nhiều cách.
Hầu hết các nhà phát triển web đều dựa vào các công cụ nguồn mở bất cứ khi nào có thể và họ không muốn xây dựng cơ sở hạ tầng hoàn toàn tuỳ chỉnh. Các khung JavaScript phía máy khách và thư viện giao diện người dùng chiếm một phần ngày càng tăng trong việc sử dụng nguồn mở. Dữ liệu về 3 khung và thư viện phía máy khách phổ biến nhất, React, Angular và Vue, cho thấy rằng:
- 72% người tham gia Khảo sát thường niên đầu tiên của MDN về nhà phát triển và nhà thiết kế web sử dụng ít nhất một trong các khung và thư viện này.
- Hơn 320.000 trang web trong số 5 triệu URL hàng đầu do HTTP Archive phân tích sử dụng ít nhất một trong các khung và thư viện này.
- Khi được nhóm theo thời gian sử dụng, 30 trong số 100 URL hàng đầu sử dụng ít nhất một trong các khung và thư viện này. (Nghiên cứu được thực hiện dựa trên dữ liệu nội bộ.)
Điều này có nghĩa là các công cụ nguồn mở tốt hơn có thể trực tiếp mang lại một trang web tốt hơn và đó là lý do các kỹ sư Chrome đã bắt đầu làm việc trực tiếp với các tác giả thư viện và khung bên ngoài.
Đóng góp cho các khung web
Các khung thường được dùng để tạo và cấu trúc trang web được chia thành hai danh mục:
- Khung giao diện người dùng (hoặc thư viện), chẳng hạn như Preact, React hoặc Vue, cung cấp quyền kiểm soát đối với lớp hiển thị của ứng dụng (ví dụ: thông qua một mô hình thành phần).
- Khung web, chẳng hạn như Next.js, Nuxt.js và Gatsby, cung cấp một hệ thống toàn diện với các tính năng có sẵn, chẳng hạn như kết xuất phía máy chủ. Các khung này thường tận dụng một khung hoặc thư viện giao diện người dùng cho lớp hiển thị.
Nhà phát triển có thể chọn không sử dụng các khung, nhưng bằng cách ghép nối một thư viện lớp hiển thị, bộ định tuyến, hệ thống tạo kiểu, trình kết xuất máy chủ, v.v., họ thường tạo ra loại khung của riêng mình. Mặc dù có ý kiến riêng, nhưng các khung công tác web sẽ mặc định giải quyết nhiều mối lo ngại trong số này.
Phần còn lại của bài đăng này nêu bật nhiều điểm cải tiến gần đây đã được đưa vào các khung và công cụ khác nhau, bao gồm cả những đóng góp của nhóm Chrome.
Angular
Nhóm Angular đã phát hành một số điểm cải tiến cho phiên bản 8 của khung này:
- Tải khác biệt theo mặc định để giảm thiểu các polyfill không cần thiết cho các trình duyệt mới hơn.
- Hỗ trợ cú pháp nhập động tiêu chuẩn cho các tuyến tải chậm.
- Hỗ trợ web worker để chạy các thao tác trong một luồng nền tách biệt với luồng chính.
- Ivy, công cụ kết xuất mới của Angular, giúp cải thiện hiệu suất biên dịch lại và giảm kích thước gói, có sẵn ở chế độ xem trước cho các dự án hiện có.
Bạn có thể tìm hiểu thêm về những điểm cải tiến này trong "Phiên bản 8 của Angular" và nhóm Chrome mong muốn hợp tác chặt chẽ với họ trong năm tới khi có thêm nhiều tính năng ra mắt.
Next.js
Next.js là một khung web sử dụng React làm lớp hiển thị. Ngoài mô hình thành phần giao diện người dùng mà nhiều nhà phát triển mong đợi từ một khung phía máy khách, Next.js còn cung cấp một số tính năng mặc định tích hợp sẵn:
- Định tuyến bằng tính năng phân chia mã mặc định
- Biên dịch và kết hợp (sử dụng Babel và webpack)
- Hiển thị phía máy chủ
- Cơ chế tìm nạp dữ liệu ở cấp độ từng trang
- Tạo kiểu khép kín (bằng styled-jsx)
Next.js tối ưu hoá để giảm kích thước gói và nhóm Chrome đã giúp xác định những khía cạnh mà chúng tôi có thể giúp cải thiện hơn nữa hiệu suất. Bạn có thể tìm hiểu thêm về từng yêu cầu bằng cách xem yêu cầu nhận xét (RFC) và yêu cầu kéo (PR):
- Một chiến lược phân đoạn webpack được cải thiện, phát ra các gói chi tiết hơn, giảm lượng mã trùng lặp được tìm nạp thông qua nhiều tuyến đường (RFC, PR).
- Tải khác biệt bằng mẫu module/nomodule có thể giảm tổng lượng JavaScript trong các ứng dụng Next.js xuống đến 20% mà không cần thay đổi mã (RFC, PR).
- Cải thiện tính năng theo dõi chỉ số hiệu suất bằng cách sử dụng User Timing API (PR).
Chúng tôi cũng đang khám phá các tính năng khác để cải thiện trải nghiệm của cả người dùng và nhà phát triển khi sử dụng Next.js, chẳng hạn như:
- Bật chế độ đồng thời để mở khoá quá trình hydrat hoá từng phần hoặc tăng dần của các thành phần.
- Một hệ thống tuân thủ dựa trên webpack, phân tích tất cả các tệp nguồn và tài sản đã tạo để hiển thị các lỗi và cảnh báo tốt hơn (RFC).
Nuxt.js
Nuxt.js là một khung web kết hợp Vue.js với nhiều thư viện để cung cấp một chế độ thiết lập có ý kiến. Tương tự như Next.js, Astro có sẵn nhiều tính năng:
- Định tuyến bằng tính năng phân chia mã mặc định
- Biên dịch và kết hợp (sử dụng Babel và webpack)
- Hiển thị phía máy chủ
- Tìm nạp dữ liệu không đồng bộ cho mọi trang
- Kho lưu trữ dữ liệu mặc định (Vuex)
Ngoài việc trực tiếp cải thiện hiệu suất của nhiều công cụ, chúng tôi còn mở rộng quỹ hỗ trợ khung để hỗ trợ tài chính cho nhiều khung và thư viện nguồn mở hơn. Với khả năng hỗ trợ gần đây cho Nuxt.js, một số tính năng dự kiến sẽ ra mắt trong tương lai gần, bao gồm cả tính năng kết xuất phía máy chủ thông minh hơn và tối ưu hoá hình ảnh.
Babel
Chúng tôi cũng đã đạt được tiến bộ trong việc cải thiện hiệu suất của một công cụ cơ bản quan trọng trong hầu hết các khung đã đề cập – Babel.
Babel biên dịch mã chứa cú pháp mới hơn thành mã mà các trình duyệt khác nhau có thể hiểu được.
Việc sử dụng @babel/preset-env để nhắm đến các trình duyệt hiện đại đã trở nên phổ biến, trong đó bạn có thể chỉ định các mục tiêu trình duyệt khác nhau để cung cấp đủ tính năng polyfill cần thiết cho tất cả các môi trường đã chọn. Một cách để chỉ định các mục tiêu là sử dụng <script
type="module"> để nhắm đến tất cả các trình duyệt hỗ trợ Mô-đun ES.
Để tối ưu hoá cho trường hợp này, chúng tôi đã ra mắt một chế độ đặt sẵn hoàn toàn mới: @babel/preset-modules. Thay vì chuyển đổi cú pháp hiện đại sang cú pháp cũ để tránh lỗi trình duyệt, preset-modules sẽ sửa từng lỗi cụ thể bằng cách chuyển đổi sang cú pháp hiện đại không bị lỗi gần nhất có thể. Điều này dẫn đến mã hiện đại có thể được phân phối gần như không sửa đổi cho hầu hết các trình duyệt.
Những nhà phát triển đã sử dụng preset-env cũng sẽ được hưởng lợi từ những hoạt động tối ưu hoá này mà không cần làm gì cả, vì những hoạt động này sẽ sớm được tích hợp vào preset-env.
Tiếp theo là gì?
Việc hợp tác chặt chẽ với các khung và thư viện nguồn mở để mang đến trải nghiệm tốt hơn giúp nhóm Chrome nhận ra những điều cơ bản quan trọng đối với cả người dùng và nhà phát triển.
Nếu bạn làm việc trên một khung web, thư viện giao diện người dùng hoặc bất kỳ hình thức nào của công cụ web (trình đóng gói, trình biên dịch, trình kiểm tra), hãy đăng ký nhận quỹ hỗ trợ khung!