Học viên: Phạm Thanh Huấn
Lớp: Web Frontend - React Js 29
Emai: HuanPT99@gmail.com
Link tham khảo: https://refine.dev/blog/what-is-vite-vs-webpack
Vite là gì? & Vite so với Webpack
Giới thiệu
Chúng ta sẽ nói về lịch sử của vite và tầm quan trọng của việc sử dụng Vite, chúng ta cũng sẽ đi sâu vào trải nghiệm của developer với Vite và lý do tại sao bạn nên bắt đầu sử dụng Vite.
Trong phần này, chúng ta sẽ nói về các modules ES và sự phát triển của việc bundling mã Javascript. Trong bối cảnh web không ngừng phát triển, tốc độ và hiệu quả là những yếu tố quan trọng có thể tạo ra hoặc phá vỡ một dự án. Là developers, chúng ta liên tục tìm kiếm các công cụ có thể tối ưu hóa quy trình làm việc của mình và mang lại hiệu suất tối ưu.
Vấn đề của việc bundling đã tồn tại từ khi developers tìm cách sắp xếp mã của họ theo kiểu modular. Các modules ES đã trở thành giải pháp cho vấn đề, cho phép các developers có trải nghiệm tốt hơn bằng cách cho phép mã được nhóm theo modules và cho phép các module khác có thể truy cập các biến modules khác nếu cần.
Sử dụng thông số kỹ thuật module ES hoặc gói webpack, cho phép ESM cho các trình duyệt không được hỗ trợ, sớm bắt đầu gây ra một vấn đề. Khi các developers xây dựng các ứng dụng quy mô lớn, có hàng nghìn modules mà các ứng dụng lớn này phụ thuộc vào, khiến quá trình xây dựng trở nên cực kỳ chậm chạp và gây khó khăn cho developers.
Chính vấn đề này đã dẫn đến việc tạo ra Vite!. Vite.js được tạo ra bởi Evan You, người tạo ra Vue.js, một framework Javascript rất phổ biến. Vite được tạo ra như một cách để đơn giản hóa và tăng tốc chu kỳ xây dựng phát triển giao diện người dùng.
Các bước chúng ta sẽ đề cập đến gồm:
Vite.js là gì?
Vite.js giải quyết các thách thức về hiệu suất như thế nào?
Các tính năng chính của Vite
Vite so với Webpack
Di chuyển từ Vite sang Webpack
Sử dụng Vite.js trong thực tế
Vite.js là gì?
Các công cụ xây dựng Javascript có thể gây phiền toái đối với các developers, đặc biệt là khi tất cả những gì bạn muốn làm là tập trung vào phát triển. Các developers muốn có một cách đơn giản hóa để xây dựng và phát triển các ứng dụng của họ và Vite.js là một trong những công cụ phổ biến giải quyết vấn đề này. Chúng ta sẽ nói về Vite.js và các tính năng chính của nó trong hướng dẫn này.
Chúng ta sẽ nói về cách Vite được xây dựng cơ bản và cách nó giải quyết các thách thức về hiệu suất trong phát triển web. Về cơ bản, cốt lõi, Vite.js làm hai việc chính và thực hiện nó rất tốt:
Phục vụ mã cục bộ trong quá trình phát triển
Bundle tất cả tài sản giao diện người dùng của bạn (HTML, CSS, JS, v.v.) để sản xuất.
Vite tận dụng các ES module nguyên bản trong trình duyệt. Điều này giúp tải mã nguồn của bạn ngay lập tức, bất kể module phụ thuộc có kích thước lớn như thế nào hoặc mã nguồn ứng dụng đã trở nên lớn như thế nào. Vite cũng sử dụng Hot Module Replacement (HMR). HMR là một phần quan trọng và hiệu quả của Vite, nó theo dõi các thay đổi trạng thái trong ứng dụng và thêm/xóa các module trong khi ứng dụng đang chạy mà không cần tải lại toàn bộ ứng dụng. Điều này có nghĩa là bạn có thể nhìn thấy những thay đổi bạn thực hiện trên mã nguồn của mình ngay lập tức trong trình duyệt khi bạn đang viết code. Thật tuyệt phải không?!
Vite.js giải quyết các thách thức về hiệu suất như thế nào?
Trong phần này, chúng ta hãy xem cách Vite giải quyết một số thách thức về hiệu suất trong phát triển web front-end.
Hỗ trợ Native ES Modules: Vite.js hoàn toàn ủng hộ native ES modules. Native ES modules được hỗ trợ trên trình duyệt hiện đại. Thay vì bundling các module trong quá trình phát triển, Vite.js tận dụng khả năng native của trình duyệt để tải trực tiếp các module ES dưới dạng các tệp tin riêng biệt. Việc áp dụng này loại bỏ nhu cầu bundling và giúp giảm thời gian khởi động và khả năng lưu trữ tốt hơn. Nó cũng đảm bảo trình duyệt cho kết quả với hiệu suất tổng thể cải thiện hơn.
Quá trình xây dựng cực nhanh: Vite.js tận dụng công cụ “esbuild” cho việc bundling, được biết đến với tốc độ xuất sắc. Trong quá trình xây dựng sản xuất, Vite.js sử dụng “esbuild” để tạo ra các bundles mã được tối ưu hóa và thu gọn. Khả năng bundling nhanh chóng của “esbuild” giúp giảm đáng kể thời gian xây dựng so với các công cụ bundling truyền thống. Điều này dẫn đến việc triển khai và năng suất của developer được cải thiện và nhanh hơn.
Tách mã và tải chậm: Vite.js hỗ trợ tách mã và tải chậm một cách mặc định. Bằng cách chia nhỏ mã nguồn thành các đoạn nhỏ, Vite.js giúp tải và thực thi mã JavaScript hiệu quả hơn. Chỉ có các module cần thiết được tải khi cần, giảm thời gian tải ban đầu và cải thiện hiệu suất. Tải chậm cho phép developer tải một phần cụ thể của ứng dụng theo yêu cầu, tối ưu hóa quá trình tải và cải thiện trải nghiệm người dùng.
Các tính năng chính của Vite
Trong phần này, chúng ta sẽ nói về các tính năng chính mà Vite cung cấp và lý do tại sao bạn nên bắt đầu sử dụng nó. Vite.js, là một công cụ xây dựng phát triển giao diện người dùng hiện đại, cung cấp một số tính năng chính phân biệt nó với các trình bundling truyền thống. Đây là một số tính năng:
Máy chủ phát triển siêu nhanh: Vite.js giới thiệu một máy chủ phát triển được tối ưu hóa cao, tận dụng việc nhập khẩu native ES module trên trình duyệt hiện đại. Nó sử dụng phương pháp biên dịch theo yêu cầu, cho phép thay thế module nhanh chóng (HMR) gần như tức thì và tải lại trang nhanh chóng. Điều này đáng kể tăng tốc quá trình phát triển, cung cấp chu trình phản hồi nhanh hơn và nâng cao năng suất của nhà phát triển.
Hỗ trợ Module ES gốc: Vite.js hoàn toàn hướng tới hỗ trợ Module ES gốc, được hỗ trợ một cách tự nhiên trong các trình duyệt hiện đại. Trong quá trình phát triển, Vite.js tận dụng khả năng tải các Module ES thành các tệp riêng biệt mà không cần phải bundle chúng lại. Phương pháp này loại bỏ việc bundle dữ liệu trong quá trình phát triển, dẫn đến thời gian khởi động nhanh hơn và khả năng lưu trữ dữ liệu tốt hơn. Nó cũng cho phép trình duyệt song song hóa việc tải các module, làm tăng hiệu suất tổng thể.
Blazing-Fast Production Builds: Vite.js sử dụng trình bundling “esbuild”, được biết đến với tốc độ vượt trội, trong quá trình xây dựng sản xuất. “esbuild” tạo ra các bundle mã được tối ưu hóa và thu nhỏ, dẫn đến giảm đáng kể thời gian xây dựng so với các trình đóng gói truyền thống. Quá trình bundling nhanh chóng này nâng cao hiệu quả của developer và cho phép chu kỳ triển khai nhanh hơn.
Không cần cấu hình: Vite.js tuân theo triết lý không cần cấu hình, mang đến một trải nghiệm ngay lập tức ngay sau khi cài đặt. Bằng cách giảm thiểu việc cần phải cấu hình thủ công, developer có thể nhanh chóng thiết lập dự án mới mà không phải tốn thời gian vào các cấu hình phức tạp. Tuy nhiên, Vite.js cũng cung cấp một tệp cấu hình linh hoạt (vite.config.js) để tùy chỉnh cao cấp khi cần thiết.
Tích hợp Devtool: Vite.js tích hợp liền mạch với các công cụ phát triển trình duyệt phổ biến. Nó cung cấp trải nghiệm gỡ lỗi nâng cao bằng cách ánh xạ mã nguồn gốc đến trình duyệt, cho phép developers gỡ lỗi trực tiếp mã của họ mà không cần bất kỳ thiết lập hoặc công cụ bổ sung nào.
Hệ sinh thái Plugin: Vite.js có một hệ sinh thái plugin đang phát triển mở rộng chức năng và tích hợp với các framework front -end phổ biến như Vue.js, React và Preact. Các plugin này nâng cao trải nghiệm phát triển và cung cấp các tính năng bổ sung, tối ưu hóa và tích hợp với các công cụ và thư viện.
Vite vs Webpack
Trong phần này, chúng ta sẽ so sánh giữa Vite và Webpack. Có các công cụ bundling tương tự như webpack ví dụ như Rollup và Parcel. Sự khác biệt chính giữa các công cụ này là Vite sử dụng máy chủ phát triển module ES gốc, trong khi webpack sử dụng máy chủ phát triển dựa trên bundle. Dưới đây là hình ảnh về cách các modules được đóng gói với ESM gốc:
Với thiết lập này, ta tránh được việc bundling không cần thiết trong quá trình phát triển và thời gian xây dựng được giảm và nhanh hơn đáng kể
Đây là hình ảnh của một máy chủ phát triển webpack điển hình:
Vite.js tuân theo cách tiếp cận cấu hình đơn giản và có ý kiến. Tệp cấu hình là tối thiểu, giúp thiết lập và bắt đầu nhanh chóng dễ dàng hơn.
Vite.js có một hệ sinh thái plugin đang phát triển tích hợp liền mạch với các framework giao diện người dùng phổ biến như Vue.js, React và Preact, trong khi webpack được biết đến với các tùy chọn cấu hình mở rộng, cho phép các developers tinh chỉnh mọi khía cạnh của quy trình bundling. Hệ sinh thái rộng lớn của nó cung cấp một loạt các plugin và trình tải, làm cho nó rất linh hoạt và có thể thích ứng với các yêu cầu dự án khác nhau.
Đây là hình ảnh của bài kiểm tra điểm chuẩn thời gian giữa webpack và Vite:
Từ hình ảnh chúng ta có thể thấy Vite nhanh như thế nào so với webpack.
Di chuyển từ Vite sang Webpack
Trong phần này, chúng ta sẽ xem xét cách chúng ta có thể di chuyển ứng dụng của mình bằng cách sử dụng webpack sang Vite. Đây là một số bước và những điều cần lưu ý:
Đầu tiên hãy cài đặt Vite và tất cả các plugin của nó. Bạn có thể kiểm tra hướng dẫn bắt đầu tại đây (here)
Đảm bảo rằng dự án của bạn đang sử dụng các modules ES. Bạn có thể làm điều đó bằng cách vào tệp package.json của bạn và dán
"type": "module",
Xóa tất cả các tệp cấu hình webpack, như webpack.config.js, và thay thế nó bằng tệp vite.config.js. Cũng trong tệp lệnh của bạn, bạn sẽ cần cập nhật cái này:
"build": "vite build",
"dev": "vite serve",
Đảm bảo loại bỏ trình tải webpack và các plugin không còn được sử dụng và kiểm tra ứng dụng của bạn, vì vậy mọi thứ đang hoạt động như bình thường
Sử dụng Vite.js trong thực tế
Trong phần này, chúng ta sẽ nói về cách chúng ta có thể bắt đầu sử dụng Vite trong thực tế và cũng minh họa bằng một số mã ví dụ.
Để tạo một dự án React với Vite, hãy dán dòng lệnh sau:
# npm 6.x
npm create vite@latest my-react-app --template react
# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react
Bây giờ bạn có thể thay đổi vào thư mục dự án, chạy npm install và khởi động máy chủ phát triển của chúng ta.
cd react-vite
npm install
npm run dev
Trong tệp scripts, chúng ta có các lệnh để xây dựng cho môi trường sản xuất và tạo xem trước cục bộ.
{
"scripts": {
"dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
"build": "vite build", // build for production
"preview": "vite preview"// locally preview production build
}
}
Kết luận
Cuối cùng, chúng ta đã đến cuối bài hướng dẫn và đã có thể tìm hiểu cách Vite.js cách mạng hóa phát triển frontend với máy chủ phát triển siêu nhanh, hỗ trợ Module ES gốc và xây dựng nhanh chóng cho môi trường sản xuất. Bạn có thể tự kiểm tra nó. Happy coding!
Bình luận