Câu chuyện về Vite(feat. Svelte)

Chia sẻ trong bài đăng lần này liên quan đến “Vite”. Gần đây trong các thông báo nội bộ về “Svelte” chúng tôi đã sắp xếp lại những câu chuyện thú vị về Vite và tổng hợp thành blog. Đặc biệt nội dung phần này sẽ nhẹ nhàng hơn là mang tính chuyên sâu. Nhưng vẫn chứa những trọng tâm và các quy trình quan trọng qua đây mong rằng sẽ giúp bạn đọc hiểu hơn về Vite.

Lưu ý: “Vite” được đọc là ‘vit’ không phải là ‘byte’. Trong tiếng Pháp mang nghĩa là “nhanh” và nó được tạo ra để trở thành công cụ giúp cho việc phát triển được nhanh hơn. Hãy cùng tìm hiểu xem Vite được ra đời như thế nào nhé.

Quiz) Javascript không có…

Javascript không có nhiều thứ nhưng nếu bạn thử suy nghĩ về chủ đề này có thể vẫn tìm ra được đáp án.

3..

2..

1..

Đáp án là module!

Javascript đã được tạo ra lúc chưa có “module”. Ở thời điểm javascript ra đời ai có thể tưởng tượng được rằng “Sẽ xây dựng một ứng dụng lớn bằng Javascript trên web”. Ban đầu nó ra đời chỉ với mục đích thực hiện các thao tác đơn giản nên không thể phát triển bằng cách tạo ra nhiều file.

Không chia thành nhiều file là một bất lợi cho việc viết các chương trình lớn. Điều gì sẽ xảy ra khi ngàn người hay hàng chục ngàn người viết số lượng code lớn trong một file? Thật khó để tượng tượng. Rốt cuộc để phát triển số lượng lớn của chương trình mà không có module là điều không dễ dàng.

Về sau node được tạo ra họ vừa có thể dùng js trên server vừa tạo module theo CommonJS viết bằng hàm require và module.export. Lưu ý ở thời điểm đó js không có cú pháp module tiêu chuẩn như import.

Và với sự xuất hiện của npm tất cả các module được tạo có thể share với nhau, từ đó trở đi chúng được bắt đầu sử dụng chính thức trong Javascript.

/// CommonJS phương thức
const path = require("path")

module.export = function() { ... }

Module của browser khác với server

Ở đây họ có thể tạo code theo đặc thù chương trình của server và khi gọi code từ trong file không bị giới hạn ở phương thức hay dung lượng. Trái lại trên trình duyệt không thể lưu file js và gọi mọi lúc nên người ta luôn phải cân nhắc về vấn đề loading và không đồng bộ. Các tập lệnh Script phải thực thi theo thứ tự vì không biết ai loading xuống trước do đó vấn đề xử lý không đồng bộ trở nên khó khăn.

Khác với CommonJS họ tạo ra module không đồng bộ chạy trên trình duyệt theo phương thức gọi là AMD để cung cấp cho các hệ thống chương trình lớn.

Tuy nhiên phương thức này không được sử dụng rộng rãi vì nó có nhược điểm phải loading nhiều file và khớp theo thứ tự. Dù vậy AMD lại liên quan đến sự ra đời của cú pháp import tiêu chuẩn..

Về sau tuy có thể sử dụng module trên cả trình duyệt với cú pháp import nhưng lại có vấn đề về tốc độ gọi đồng thời nhiều file js theo đặc thù của trình duyệt. Hơn nữa khi loading một file js cụ thể nếu bị ngừng sẽ làm toàn bộ bị chậm theo do vậy nó không được sử dụng nhiều.

Phải sử dụng module như thế nào trên trình duyệt? = Bundle!

Nếu việc xử lý bất đồng bộ nhiều file là vấn đề vậy ngay từ đầu kết hợp chúng lại thành một file rồi truyền đi thì sao? 

Tham vọng “Muốn sử dụng module trên trình duyệt” thật đáng sợ. Sau nhiều thử thách họ đã tạo “một bundle” kết hợp tất cả các file bằng cách chia nó thành nhiều file như một module để phát triển. Đây là lúc khái niệm “bundle” sinh ra, hỗ trợ cho việc phát triển hợp tác với quy mô lớn.

Sự phát triển của bundle

Bất cứ khi nào có một công cụ gợi ý paradigm(mô hình) mới phát hành trên web, các công cụ với khái niệm tốt hơn và cải thiện tính năng sẽ được tạo ra.

Vì chủ đề của bài viết này là Vite nên chúng ta sẽ không nói về mỗi bundle quá nhiều. Thay vì đó, chúng tôi sẽ giới thiệu bài viết hay hơn mong rằng các bạn đừng xem sơ hay lướt qua mà đọc thử nội dung đó nhé.

Vấn đề của Bundle = Tốc độ build chậm

Bundle có thể giải quyết các vấn đề với module có sẵn nhưng lại gặp rắc rối với tốc độ. Trước đó họ chỉ viết js rồi thực thi chạy ngay trên trình duyệt nhưng giờ phải tập hợp tất cả các file lại với nhau. Mỗi khi sửa đổi cần phải có một bản build mới và tốc độ build không thể nhanh dẫn đến việc phát hiện lỗi sớm vốn là ưu điểm của javascript bị giảm đi đáng kể.

Tốc độ build nhanh gấp 100 lần hơn trước đó! – esbuild

Lúc này một sự thay đổi mới được tạo ra. Một công cụ nhanh hơn gấp 100 lần so với tốc độ build trước đây đã ra đời. Đó chính là “esbuild”! esbuild được viết bằng ngôn ngữ go mà không phải là javascript khác với bundle. Nhờ vậy nó có thể tạo bản build nhanh hơn rất nhiều do sử dụng tối đa chức năng của native thay vì các js chậm dựa trên script.

Nhưng vì sao không sử dụng esbuild?

esbuild nhanh hơn gấp 100 lần tại sao mọi người lại dùng Webpack? Thời điểm có esbuild, Webpack đã không còn là một công cụ build thông thường. Nó là tool tích hợp phát triển vượt qua cả các công cụ build hỗ trợ như trans file, code splitting, treehaking, HMR, CSS, HTML, asset thông qua DevServer và nhiều Loader khác nhau. Ngược lại, esbuild chỉ là một công cụ build.

Thế nên những gì có thể phát triển bằng esbuild thường là một thư viện ở dạng vanilla script và phát triển web dựa trên framework chỉ sử dụng các bundle mặc định.

Sự xuất hiện của Snowpack!

“Với tốc độ xử lý của esbuild không dùng thì quá đáng tiếc…”

“Nó nhanh hơn gấp 100 lần, làm thế nào để sử dụng nó trong thực tế?”

Thế nhưng vì sự khác biệt quá lớn về tốc độ nên họ không dùng esbuild chỉ vì tính thuận tiện của nó. Cuối cùng năm 2020 một bundle mới ra đời giải quyết được vấn đề này. Tên gọi là ”Snowpack!”

Làm thế nào mới có thể sử dụng được esbuild?

esbuild không phải là tool tổng hợp mà là công cụ build nên người ta cần các tool có sẵn(như Webpack, Parcel, Rollup) để tạo nên thành quả cuối cùng. Và bundle tool vốn dĩ trong javascript có tốc độ build chậm nên mỗi khi chỉnh sửa code cần một quá trình build liên tục, dự án càng lớn việc kiểm tra các yêu cầu thay đổi dần dần bị chậm lại.

Snowpack đã giải quyết vấn đề này như thế nào?

esbuild có khả năng build nhanh nhưng lại không thể tổng hợp làm cho tất cả chức năng thành một. Và phương thức module tiêu chuẩn của trình duyệt đã làm cho từng module riêng lẻ hoạt động, nhưng thực tế lại có vấn đề khi loading quá nhiều file.

Vậy sẽ thế nào nếu build bằng esbuild rồi phát triển bằng phương thức chuẩn của trình duyệt sau đó tạo ra sản phẩm bằng bundle tool hiện có? Dẫu sao trong quá trình phát triển điều quan trọng nhất ở đây là phản ánh được những thay đổi nhanh chứ không phải là code đã hoàn thành.

Sửa một file sẵn có không phải là build toàn bộ rồi tạo ra kết quả mà build từng module riêng, phương pháp sửa đổi này chỉ có file tương ứng được build lại rồi update. Và sử dụng esbuild khi build. Với sự phân chia phát triển như thế này họ đã tạo ra thành quả nhanh chóng trong khi vẫn giữ được ưu điểm của esbuild và module tiêu chuẩn trình duyệt.

Snowpack hỗ trợ các chế độ phát triển qua esbuild, còn bundle thực tế đạt được một mũi tên trúng hai đích đó là sự nhanh chóng và tiện lợi được cung cấp thông qua Webpack.

Svelte, Rollup và Snowpack

Đặc biệt thông qua phương thức này nó cung cấp chức năng vô cùng mạnh mẽ HMR(Hot module replace) chỉ cập nhật nội dung file được sửa mà không cần làm mới lại.

Lúc này Svelte đã sử dụng Rollup làm bundle tool chính thức cho Svelte Framework, vì Rich Harris người phát triển ra Svelte cũng là người tạo ra bundle tool Rollup.

Trên Rollup không thể hỗ trợ HMR. Người ta lại mong trên Svelte hỗ trợ HMR- tính năng mạnh mẽ này, cuối cùng họ đã loại bỏ Rollup và đổi Snowpack thành bundle tool chính thức.

Bộ đôi Svelte và Snowpack

Bundle tool chính thức của Svelte được thay bằng Snowpack, bên cạnh đó Svelte cũng thu nhận được tốc độ nhanh chóng của esbuild và tính năng mạnh mẽ của HMR. Nhưng Snowpack lại không có tính ổn định. Trong quá trình sử dụng liên kết với Webpack nó xảy ra một vài lỗi và xuất hiện vài điểm không hỗ trợ các loader của Webpack. Dù sao thì sau quá trình thử nghiệm này những khái niệm có thể cung cấp các tiện ích phát triển khác nhau như cung cấp HMR, server phát triển cho các bundle tool mặc định đã xuất hiện trên thế giới.

Cuối cùng sự xuất hiện của Vite

Khái niệm của Snowpack rất tốt nhưng cần thời gian trong việc ổn định hóa. Evan Yu cải thiện những thiếu sót của Snowpack rồi tạo ra Vite. Chuyên môn của Evan Yu – người phát triển ra Vue.js là làm cho sản phẩm vốn có trở nên đơn giản và dễ sử dụng hơn. Anh ấy cải thiện những thiếu sót của angaulrjs để Vue.js ngắn gọn và dễ dùng, xem Redux rồi tạo Vue, thông qua Next tạo Nuxt. Và giới thiệu Vite đến với thế giới thông qua Snowpack.

Vite là công cụ build frontend kết hợp khái niệm của Snowpack và những chức năng cung cấp trong các công cụ bundle khác như chế độ phát triển dùng esbuild và module trình duyệt, server phát triển, proxy server, bundle tool, code splitting, HMR.

Vite được tạo ra tiếp thu tất cả khái niệm của những bundle vốn có và cả phương thức sử dụng đơn giản đến tính ổn định, còn được xuất hiện trong nội dung với chủ đề ” bundle tool hài lòng nhất năm 2021”.

“Vite” bạn đồng hành mới của Svelte

Sự xuất hiện của Vite giúp Svelte có được lựa chọn mới. Và cuối cùng họ loại bỏ Snowpack để kết hợp Svelte với Vite. Chỉ vài tháng trước đó trang web chính thức của Svelte đã mô tả dự án dựa vào Rollup nhưng hiện tại họ đang hướng dẫn cấu hình dự án hoàn toàn thông qua Vite. Nhờ điều này Svelte có thể hỗ trợ Dev server + HMR + typescript + dev proxy.

Sự phát triển và hệ sinh thái của Vite

Vite đã phát triển rất nhanh nhờ vào là công cụ build nhanh mà thời điểm ấy mọi người mong đợi và hoạt động trên mạng lưới của Evan Yu – người tạo ra Vus.js. Nó đã thu hút một hệ sinh thái khổng lồ gồm những người dùng Rollup vốn không thích cách thiết lập phức tạp của Webpack. Đặc biệt vừa hỗ trợ Svelte, React, Preact, Lit và một số framework khác vừa tạo ra trải nghiệm setting các phát triển hầu như không thay đổi trước kia trở nên đơn giản một cách đáng ngạc nhiên. Ngoài ra nó đã trở thành một set quà tổng hợp chất lượng cao vừa hỗ trợ ‘typescript” với nhiều trình tải CSS được cài theo mặc định và các chức năng HMR, Dev server, Proxy.

Tuy hệ sinh thái vẫn chỉ chạy trên Webpack thế nhưng hệ sinh thái độc quyền của Vite cũng đang dần được hình thành, nó đang phát triển nhanh một cách đáng ngạc nhiên và liên tục không ngừng. Các module chính cũng dần phát triển theo hình thức hỗ trợ được cả hai bên vì thế họ đang xây dựng môi trường nhanh chóng, thuận tiện và phong phú riêng cho mình.

Vite hiện tại là công cụ build nhận được sự công nhận của nhiều nhà phát triển, và đúng như tên gọi nó thực sự rất nhanh. Được bầu chọn là “Bundle tool hài lòng nhất năm 2021” với mức độ hài lòng cao và cả tính ổn định. Nếu có một dự án quá chậm để cập nhật những thay đổi trong quá trình build hoặc phát triển trong quá trình làm việc hiện tại, các bạn hãy thử Vite một lần xem sao nhé?

Với những bạn tò mò về Vite hãy gõ lệnh dưới terminal và thử trải nghiệm tốc độ nhanh của nó, mong rằng bài viết này đã giúp các bạn hiểu sâu hơn những gì liên quan đến Vite.

npm-init-vite