Chrome đang cộng tác với các khung nguồn mở để hướng đến một môi trường web tốt hơn
Chrome là một bên đóng góp tích cực 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ị Nhà phát triển Chrome năm 2019 trình bày những nội dung chúng tôi đã đạt được trong năm qua.
Hãy đọc tiếp phần tóm tắt mở rộng của buổi trò chuyện kèm theo các thông tin chi tiết và tài nguyên bổ sung.
Chúng tôi làm cách nào để cải thiện môi trường web?
Mục tiêu của tất cả 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 – JavaScript và công cụ WebAssembly cốt lõi tạo nên Chrome – để các nhà phát triển được trang bị các tính năng giúp họ xây dựng những trang web tuyệt vời. Chúng tôi cũng cố gắng cải thiện các trang web đã được phát hành chính thức hiện nay bằng cách đóng góp vào công cụ nguồn mở theo nhiều cách.
Hầu hết các nhà phát triển web đều sử dụng các công cụ nguồn mở bất cứ khi nào có thể và không muốn xây dựng cơ sở hạ tầng hoàn toàn tuỳ chỉnh. Mức sử dụng nguồn mở ngày càng tăng của các khung JavaScript phía máy khách và thư viện giao diện người dùng. Dữ liệu về 3 khung và thư viện phổ biến nhất phía máy khách là React, Angular và Vue cho thấy:
- 72% người tham gia Khảo sát thường niên đầu tiên về nhà thiết kế và nhà phát triển web của MN sử dụng ít nhất một trong những khung và thư viện này.
- Hơn 320.000 trang web trong 5 triệu URL hàng đầu được phân tích bằng Kho lưu trữ HTTP 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 số các khung và thư viện này. (Nghiên cứu đã được thực hiện trên dữ liệu nội bộ.)
Điều này có nghĩa là công cụ nguồn mở tốt hơn có thể trực tiếp mang đến web tốt hơn. Đó là lý do các kỹ sư của Chrome bắt đầu làm việc trực tiếp với tác giả thư viện và khung bên ngoài.
Đóng góp cho khung web
Các khung thường được dùng để xây dựng và sắp xếp cấu trúc cho các trang web được chia thành hai loại:
- Khung giao diện người dùng (hoặc các thư viện), chẳng hạn như Preact, React hoặc Vue, cho phép kiểm soát lớp khung hiển thị của ứng dụng (thông qua một mô hình thành phần chẳng hạn).
- Các 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 được tích hợp sẵn, chẳng hạn như hiển thị phía máy chủ. Các khung này thường sử dụng khung giao diện người dùng hoặc thư viện cho lớp khung hiển thị.
Các nhà phát triển có thể chọn không sử dụng khung, nhưng bằng cách ghép nối một thư viện lớp khung hiển thị, bộ định tuyến, hệ thống định kiểu, trình kết xuất máy chủ, v.v., họ thường sẽ tạo một loại khung của riêng mình. Mặc dù đã có quy luật, nhưng các khung web luôn giải quyết được những mối lo ngại này theo mặc định.
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 trong các khung và công cụ khác nhau, bao gồm cả sự đóng góp của nhóm Chrome.
Angular
Nhóm Angular đã gửi một số điểm cải tiến cho phiên bản 8 của khung này:
- Theo mặc định, tính năng tải vi phân sẽ giúp giảm thiểu các đoạn mã polyfill không cần thiết cho các trình duyệt mới.
- Hỗ trợ cú pháp nhập động chuẩn cho các tuyến tải từng phần.
- Hỗ trợ trình chạy web để chạy các thao tác trong một luồng ở chế độ nền tách biệt với luồng chính.
- Ivy, công cụ hiển thị mới của Angular mang lại hiệu suất biên dịch lại tốt hơn 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 được 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 khung 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ừ 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 chế độ phân tách mã mặc định
- Biên dịch và đóng gói (sử dụng Babel và webpack)
- Kết xuất phía máy chủ
- Cơ chế tìm nạp dữ liệu ở cấp mỗi trang
- Định kiểu đóng gói (bằng styled-jsx)
Next.js tối ưu hoá để giảm kích thước gói, còn nhóm Chrome đã giúp xác định những khía cạnh có thể giúp chúng tôi cải thiện hiệu suất hơn nữa. Bạn có thể tìm hiểu thêm về từng loại bằng cách xem yêu cầu nhận xét (RFC) và yêu cầu kéo (PR) của chúng:
- Chiến lược phân đoạn gói web được cải tiến giúp tạo ra các gói chi tiết hơn, giúp giảm số lượng mã trùng lặp được tìm nạp qua nhiều tuyến (RFC, PR).
- Việc tải vi phân bằng mẫu mô-đun/không mô-đun có thể làm giảm tổng lượng JavaScript trong các ứng dụng Next.js tới 20% mà không cần thay đổi mã (RFC, PR).
- Tính năng theo dõi chỉ số hiệu suất sử dụng API Thời gian người dùng (PR) được cải thiện.
Chúng tôi cũng đang khám phá các tính năng khác để cải thiện cả trải nghiệm của 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 dần hoặc một phần cho các thành phần.
- Một hệ thống tuân thủ dựa trên gói web giúp phân tích tất cả các tệp nguồn và thành phần đã tạo để đưa ra 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 các thư viện khác nhau để cung cấp một chế độ thiết lập có sẵn. Tương tự như Next.js, phiên bản này có nhiều tính năng có sẵn:
- Định tuyến bằng chế độ phân tách mã mặc định
- Biên dịch và đóng gói (sử dụng Babel và webpack)
- Kết xuất 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)
Cùng với hoạt động trực tiếp cải thiện hiệu suất của nhiều công cụ, chúng tôi đã mở rộng quỹ khung để hỗ trợ tiền cho thêm nhiều khung và thư viện nguồn mở. Với sự hỗ trợ gần đây của chúng tôi 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 tính năng hiển thị máy chủ và tối ưu hoá hình ảnh thông minh hơn.
Babel
Chúng tôi cũng đã tiến hành 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.
Bumblebee 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.
Người dùng thường sử dụng @babel/preset-env để nhắm mục tiêu đến các trình duyệt hiện đại, trong đó có thể chỉ định các mục tiêu trình duyệt khác nhau để cung cấp đủ polyfilling cần thiết cho tất cả môi trường đã chọn. Có một cách để chỉ định 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 giá trị đặt trước 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ũ hơn để 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 gần nhất có thể và không bị hỏng. Nhờ đó, mã hiện đại có thể được phân phối gần như chưa bị sửa đổi cho hầu hết các trình duyệt.
Các nhà phát triển đã sử dụng preset-env cũng sẽ hưởng lợi từ những tính năng tối ưu hoá này mà không phải làm gì, vì các tính năng này cũng 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ở để cung cấp trải nghiệm tốt hơn sẽ giúp nhóm Chrome nhận ra được những điều về cơ bản là quan trọng đối với người dùng cũng như nhà phát triển.
Nếu bạn sử dụng một khung web, thư viện giao diện người dùng hoặc bất kỳ dạng công cụ web nào (bundler, trình biên dịch, linter), hãy đăng ký quỹ khung!