Các tính năng mới mong đợi khi bạn nâng cấp lên Vite v4.0.4
Vite v4.0.4 được phát hành vào ngày 3 tháng 1 năm 2023 và nâng cao các chức năng của môi trường phát triển Vite và ra mắt chỉ 5 tháng sau Vite 3. Phiên bản mới đi kèm với các tính năng và bản cập nhật mới sẽ giúp trải nghiệm phát triển JavaScript nhanh hơn và mạnh mẽ hơn trước .
Ở đây, chúng ta sẽ thảo luận về Vite là gì, các tính năng và cập nhật quan trọng có trong Vite 4.
Mục Lục
Cái gì iI Vite?
Bản thân từ “vite” có nghĩa là “nhanh”. Nó là một máy chủ phát triển và công cụ xây dựng giao diện người dùng được thiết kế để cung cấp trải nghiệm phát triển nhanh hơn, nhẹ hơn và đơn giản hơn. Nó phục vụ mã của bạn trong quá trình phát triển, nhóm các tệp của bạn để sản xuất và cho phép tích hợp dễ dàng với các khung và thư viện JavaScript khác nhau, chẳng hạn như Vue, React, Preact và Svelte.
Vite đã trải qua nhiều cải tiến trong hai năm qua và Vite 4 mang đến một số tính năng mới và cải tiến.
1. Tổng hợp 3
Rollup là một gói mô-đun JavaScript cho phép các nhà phát triển gói các mô-đun JavaScript khác nhau vào một tệp duy nhất. Điều này lần lượt cải thiện hiệu suất của ứng dụng bằng cách giảm số lượng yêu cầu mà trình duyệt cần thực hiện để tải mã.
Vite hiện sử dụng Rollup 3 trong thời gian xây dựng. Vite phiên bản 3 đã sử dụng Rollup 2 nhưng sau khi phát hành Rollup 3 vào tháng 10 năm 2022, phiên bản mới của Vite đi kèm với một bản nâng cấp lớn cho Rollup 3.
Bạn nên tham khảo hướng dẫn di chuyển Rollup trước khi nâng cấp lên Rollup 3, vì có thể xảy ra sự cố, mặc dù Rollup 3 hầu như tương thích với Rollup 2.
2. Plugin React mới sử dụng Speedy Web Compiler (SWC)
SWC là trình biên dịch JavaScript siêu nhanh được viết bằng Rust. SWC và Babel đều là trình biên dịch JavaScript chuyển đổi mã của bạn thành mã được trình duyệt hỗ trợ nhưng SWC đã tuyên bố là nhanh hơn Babel.
Kể từ khi Vite v3 sử dụng Babel, v4 đi kèm với việc giới thiệu SWC như một giải pháp thay thế hoặc thay thế, đặc biệt là đối với các dự án React.
Trong khi Vite tiếp tục hỗ trợ Babel, Vite 4 giới thiệu hai plugin (vitejs/plugin-react và vitejs/plugin-react-swc) với sự cân bằng khác nhau cho các dự án React.
Plugin vitejs/plugin-Reac
Plugin này cung cấp Thay thế mô-đun nóng nhanh trong khi sử dụng kích thước gói tối thiểu, bằng cách sử dụng esbuild và Babel. Nó cũng cung cấp thêm tính linh hoạt để có thể sử dụng đường dẫn biến đổi Babel.
Thay thế mô-đun nóng cho phép làm mới chất béo. Nó cho phép các nhà phát triển cập nhật các mô-đun trong một ứng dụng đang chạy mà không cần phải làm mới toàn bộ trang. Thực hiện theo phần trình diễn bên dưới để cài đặt plugin trong dự án của bạn.
npm install @vitejs/plugin-react
Thực hiện theo mã bên dưới để nhập plugin vào dự án của bạn;
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'export default defineConfig({
plugins: [react()],
})
Plugin vitejs/plugin-Reac-swc
Đây là một plugin mới sử dụng esbuild trong quá trình xây dựng và Trình biên dịch web tốc độ trong quá trình phát triển.
Bằng cách thay thế Babel bằng SWC, plugin nhằm mục đích tăng tốc đáng kể quá trình phát triển, đặc biệt đối với các dự án không yêu cầu tiện ích mở rộng React không chuẩn.
Đây là cách cài đặt plugin;
npm i @vitejs/plugin-react-swc
Nhập nó vào dự án của bạn như sau;
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";export default defineConfig({
plugins: [react()],
});
3. Nhập CSS dưới dạng Chuỗi
Tính năng này cung cấp giải pháp cho hành vi tải kép Vite 3 CSS xảy ra bằng cách nhập xuất mặc định của tệp CSS, ví dụ:
import cssString from './global.css
Để ngăn chặn hành vi này, Vite 4 giới thiệu việc sử dụng công cụ sửa đổi hậu tố truy vấn nội tuyến. Đây là một cuộc biểu tình của cú pháp;
import cssString from './global.css?inline'
Do đó, tính năng xuất mặc định CSS v3 không còn được dùng nữa.
4. Biến môi trường
Vite đã cập nhật các phần phụ thuộc vào dotenv và dotenv-expand. Các phiên bản mới đang được sử dụng lần lượt là dotenv 16 và dotenv-expand 9. Bản cập nhật này sẽ yêu cầu bạn ngắt dòng các giá trị bao gồm các ký tự “#” hoặc “`” trong dấu ngoặc kép để đảm bảo chức năng phù hợp. Đây là một ví dụ;
SECRET_HASH="something-with-a-
Để giảm bớt quá trình cập nhật các tệp ENV, Vite đã khuyến nghị sử dụng giao diện dòng lệnh dotenv. Đây là plugin tùy chọn có thể giúp đảm bảo rằng các tệp ENV nhất quán trên các máy, môi trường hoặc thành viên nhóm khác nhau. Nó có thể giúp quá trình cập nhật các tệp ENV bớt tẻ nhạt hơn.
Các bản nâng cấp, bản sửa lỗi và di chuyển khác sang Vite v4.0.4
Vite đã thêm nhiều phím tắt giao diện dòng lệnh. Để xem danh sách tất cả các phím tắt, hãy nhấn h trong quá trình phát triển.
Bản dựng trình duyệt hiện đại hiện cũng nhắm mục tiêu safari14 theo mặc định để có khả năng tương thích ES2020 rộng hơn. Có hỗ trợ cho gói vá khi gói phụ thuộc trước, có các thông báo lỗi được cải thiện trong SSR và hơn thế nữa.