Ra mắt bản beta của Vite+

 (voidzero.dev)
1 điểm bởi GN⁺ 4 giờ trước | 1 bình luận | Chia sẻ qua WhatsApp
  • Để giảm gánh nặng phải tự lắp ghép riêng các công cụ phát triển web cho từng dự án, Vite+ gộp runtime, trình quản lý gói, công cụ build·test·kiểm tra vào một điểm vào duy nhất
  • vp dev, vp check, vp test, vp build, vp pack, vp run được kết nối với Vite 8, Vitest, Rolldown, tsdown, Oxlint, Oxfmt để cung cấp hệ thống lệnh nhất quán
  • Kể từ sau bản alpha, dự án đã trải qua hơn 12 phiên bản và hơn 500 PR, cải thiện về caching, migration, template cho tổ chức, hỗ trợ mạng doanh nghiệp và độ ổn định đa nền tảng
  • Theo các kho công khai, hơn 1.300 dự án phụ thuộc vào vite-plus, và các dự án như Dify, critical, BlockNote, vinext, îles, Inkline, npmx đã sử dụng
  • Vì vẫn chưa đến giai đoạn 1.0, các hạng mục như remote caching, hỗ trợ GitLab CI/CD, khả năng tương thích framework·plugin, migration, kênh phân phối và cải thiện chẩn đoán vẫn còn ở phía trước

Toolchain tích hợp mà Vite+ mang lại

  • Vite+ đã ra mắt bản beta dưới dạng toolchain tích hợp cho phát triển web
  • Từ một điểm vào duy nhất, nó quản lý runtime và trình quản lý gói, đồng thời cung cấp nhiều công cụ frontend trong một stack đã được kiểm chứng
  • Đây là mã nguồn mở hoàn toàn theo giấy phép MIT và không phụ thuộc vào framework cụ thể nào
  • Có thể dùng cho nhiều loại dự án web như CLI, thư viện, web app
  • Dự án mới bắt đầu với vp create, còn dự án hiện có bắt đầu với vp migrate

Dùng cùng một bộ lệnh để phát triển·kiểm tra·build

  • Vite+ được thiết kế để dùng chung một hệ thống lệnh, thay vì phải học từng tổ hợp công cụ và lệnh khác nhau ở mỗi repository
  • Các lệnh chính như sau
    • vp dev: khởi chạy máy chủ phát triển dựa trên Vite 8, bao gồm hot module replacement
    • vp check: chạy định dạng bằng Oxfmt, lint bằng Oxlint và kiểm tra kiểu cùng một lúc
    • vp test: chạy unit test dựa trên Vitest
    • vp build: thực hiện production build dựa trên Vite 8
    • vp pack: bundle thư viện dựa trên tsdown cùng với các best practice
    • vp run: chạy npm script hoặc tác vụ bằng trình chạy tác vụ tích hợp có nhận biết monorepo, đồng thời dùng caching thông minh
  • Khi team và codebase càng lớn, các lợi ích sau càng rõ rệt
    • Phiên bản công cụ được đồng bộ
    • Việc chia sẻ cấu hình trở nên dễ hơn
    • Giảm các bước thiết lập cho người đóng góp mới
    • CI chạy cùng các lệnh như môi trường phát triển cục bộ
  • Nó phù hợp với các lập trình viên không muốn lặp đi lặp lại việc tự lắp ráp toolchain, và các team muốn có cấu hình nhất quán trên toàn dự án
  • Vite+ không thay thế hệ sinh thái Vite
    • Plugin Vite vẫn là plugin Vite
    • Dự án vẫn có thể tiếp tục dùng trình quản lý gói mong muốn ở bên trong
    • Vite+ cung cấp lớp tích hợp để các thành phần này hoạt động như một toolchain thống nhất

Những thay đổi từ alpha đến beta

  • Sau bản alpha của Vite+, dự án đã được kiểm thử trên các dự án thực tế, phát hành hơn 12 phiên bản và hợp nhất hơn 500 PR
  • Các cải tiến chính gồm
    • Caching thông minh hơn: vp run kết hợp theo dõi dữ liệu tự động với metadata do Vite báo cáo để cache build hoạt động chính xác mà không cần liệt kê thủ công input, output và biến môi trường
    • Cải thiện migration: vp migrate xử lý nhiều cấu hình ứng dụng khác nhau và còn cung cấp prompt migration cho agent
    • Tính năng cho doanh nghiệp: template tổ chức giúp chuẩn hóa cấu hình giữa các team, và HTTP nhận biết proxy cùng CA tùy chỉnh cho phép chạy vp ngay cả sau proxy và tường lửa doanh nghiệp
    • Đa nền tảng: vp đã được tăng cường để hoạt động tốt hơn trên các hệ điều hành và shell chính
    • Tinh chỉnh và cải tiến: hơn 180 bản sửa lỗi và cải tiến đã được áp dụng vào vite-plus
  • Có thể xem chi tiết thay đổi tại lịch sử phát hành của Vite+

Các công cụ nền tảng cũng phát triển cùng nhau

  • Trong quá trình Vite+ được xây dựng, các công cụ nền tảng cũng tiếp tục được cải thiện
  • Những thay đổi chính kể từ sau alpha gồm

Các trường hợp áp dụng thực tế

  • Có hơn 1.300 kho công khai phụ thuộc vào vite-plus, chưa tính các dự án riêng tư và cài đặt CLI toàn cục
  • Vite+ đang được dùng trong nhiều loại dự án khác nhau
    • Dify: nền tảng mã nguồn mở để xây dựng ứng dụng LLM
    • critical: công cụ critical-path CSS độc lập framework của Addy Osmani
    • BlockNote: trình soạn thảo rich text kiểu Notion dựa trên block cho React
    • vinext: framework drop-in tương thích Next.js dựa trên Vite
    • zerobyte: công cụ tự động hóa sao lưu cho người dùng self-hosted, xây bằng TanStack và React
    • îles: trình tạo website islands partial hydration cho Vue
    • agentsview: công cụ tìm kiếm·phân tích phiên ưu tiên cục bộ cho coding agent, xây bằng Svelte
    • Inkline: thư viện UI component hỗ trợ Vue, React, Svelte, Angular, Solid, Qwik, Astro
    • npmx: trình duyệt npm registry mã nguồn mở dựa trên Nuxt
  • Daniel Roe của npmx cho biết Vite+ giúp duy trì trải nghiệm phát triển nhanh chóng, đồng thời tăng tốc cả CI và quá trình review

Những việc còn lại trước 1.0

  • Vite+ đã ổn định nhưng vẫn chưa hoàn thiện, và được khuyến nghị áp dụng nếu nó đáp ứng các nhu cầu mà một toolchain tích hợp cần có
  • Các hạng mục sẽ tập trung cho đến 1.0 gồm
    • Triển khai remote caching cho Vite Task là vp run
    • Đưa setup-vp vào GitLab CI/CD
    • Cải thiện khả năng tương thích trên toàn bộ framework và plugin của Vite
    • Hỗ trợ thêm nhiều đối tượng migration hơn
    • Bổ sung các kênh phân phối như Homebrew formula chính thức
    • Cải thiện tài liệu và chẩn đoán để rõ ràng hơn
  • Trước khi phát hành 1.0, dự án ưu tiên phản hồi từ cộng đồng để thu hẹp những khoảng trống tương thích còn lại

Cài đặt và migration

  • Lệnh vp toàn cục được cài trên macOS/Linux bằng lệnh sau
curl -fsSL https://vite.plus | bash
  • Trên Windows, dùng lệnh PowerShell sau
irm https://vite.plus/ps1 | iex
  • Tạo dự án mới bằng lệnh sau
vp create
  • Để thử Vite+ trên dự án Vite hiện có, dùng lệnh sau
vp migrate

Bài viết liên quan

1 bình luận

 
GN⁺ 4 giờ trước
Ý kiến trên Hacker News

  • Tôi rất thích Vite, nhưng thật sự không biết các công cụ khác là gì
    Mới cúi đầu làm việc một lúc mà hệ sinh thái công cụ frontend đã đột nhiên tiến hóa, và tôi tự hỏi liệu có xu hướng hướng tới một stack nhàm chán nhưng hoạt động tốt hay không

    • Các công cụ đi kèm thực ra khá tuyệt: vitest là một trình chạy test rất nhanh, và sau khi đã dùng nhiều công cụ như jest hay trình chạy test tích hợp của Node, tôi vẫn thích nó
      oxlint thay thế eslint, tương thích với định dạng file cấu hình và cực nhanh vì không được viết bằng JavaScript. Tôi cũng đã thử biome, nhưng oxlint có nhiều rule hơn và khả năng tương thích với eslint tốt hơn
      oxfmt thay thế prettier, nhanh hơn vì không được viết bằng JavaScript, còn rolldown thay thế rollup, tương thích nhưng nhanh hơn nhiều. Với các dự án mới, tôi đã chủ yếu dùng những công cụ này
    • Các công cụ khác dùng cho testing, bundling, linting và formatting
      Trước đây phải dùng các công cụ từ những dự án mã nguồn mở khác nhau, mỗi thứ có cấu hình và chu kỳ cập nhật riêng, còn giờ chúng được xử lý như một toolchain đơn giản duy nhất
      Vite+ về cơ bản chính là stack “nhàm chán nhưng hoạt động tốt”, đồng thời hiệu năng tốt hơn và cần ít cấu hình hơn
    • Đúng vậy, chính là hướng đó
      Viết lại bằng Rust để làm cho nhanh, như eslint → oxlint, prettier → oxfmt; còn webpack → Vite thì Vite đã đủ phổ biến nên đang được chấp nhận
      rolldown → tsdown bổ sung hỗ trợ TypeScript, còn jest → vitest thì hợp với Vite
      Nói cách khác, họ lấy các thông lệ đã hình thành trong 10 năm qua rồi gói hỗ trợ TypeScript, hiệu năng dựa trên Rust và khả năng tương tác lại với nhau
    • Tôi từng thử dùng Vite nhưng không thấy lợi thế lớn so với esbuild nên đã rời xa
      Tôi cũng đang dùng Deno, nên tò mò không biết điểm nào của nó hữu ích
    • Đây là stack nhàm chán nhưng hoạt động tốt mới nhất đang nổi lên hiện nay

  • Tôi thích Vite, Vitest, Oxlint, Oxfmt và thường xem các công cụ này trước tiên trong hầu hết dự án mới
    Hy vọng họ có đủ vốn để tiếp tục phát triển ít nhất trong 10 năm tới
    Tốt hơn nhiều so với việc mở một dự án cũ ra và thấy Gulp, Grunt, webpack cùng đủ loại công cụ lộn xộn khác trộn lẫn. Tôi cũng đã chuyển một dự án như vậy sang stack mới

    • Theo tôi biết thì VoidZero đã được Cloudflare mua lại, nên vốn có lẽ không phải vấn đề
      Điều mấu chốt là Cloudflare có để họ tiếp tục xây dựng Vite và các tính năng Vite+ hay không. Vì đó là những tính năng có lợi không chỉ cho Cloudflare mà cho mọi nền tảng đám mây
      https://blog.cloudflare.com/voidzero-joins-cloudflare/
    • Việc khiến Vite, ESLint, Prettier, TypeScript, React ăn khớp với nhau một cách tự nhiên có thể khá khó
      Đặc biệt càng khó hơn nếu là full-stack có server-side rendering; nếu chỉ nhìn frontend và bỏ TypeScript ra thì khá dễ
      Cần chờ xem Vite+ có giúp ích trong các trường hợp phức tạp hơn hay không

  • Tôi nghĩ dự án này nên tìm một cái tên tốt hơn
    Nó khá dễ gây nhầm lẫn vì thực ra không hẳn là một Vite tốt hơn, mà là một gói các công cụ khác
    Khi đó Void Zero có thể đã muốn kiếm tiền từ thương hiệu Vite, nhưng giờ đã được Cloudflare mua lại thì cũng không còn cần làm vậy nữa

    • Vì là nhiều thứ được thêm vào Vite, nên “plus” có thể mang nhiều nghĩa

  • Tôi đang dùng Vite, Vitest, Rolldown, tsdown, Oxlint, Oxfmt và rất hài lòng
    Tôi cũng đã hard fork nhiều package và không muốn quay lại. Tất cả cứ thế hoạt động tốt
    Nếu thấy rối vì tên gọi, hãy bắt đầu từ Oxlint https://oxc.rs/docs/guide/usage/linter và Rolldown https://rolldown.rs/
    Trong 6 tháng triển khai vừa qua, tôi chỉ phải sửa tsconfig rất ít
    Thường thì nếu không phải những thứ như antd6, echart, rendering engine hay thư viện không gian địa lý, tôi sẽ lấy package mới về, nhờ Claude dọn lại, đưa vào một hệ thống kiểu dữ liệu nghiêm ngặt và thống nhất, rồi chỉnh theo gu Vite, tsconfig, oxlint
    Kết quả là giảm nhu cầu phải liên tục theo dõi các vấn đề phình to thư viện hay tấn công chuỗi cung ứng, đồng thời code dễ đọc và dễ sửa hơn

  • Trong 4 năm từ 2022 đến 2026, Vite đã tăng major version năm lần: 3 → 4 → 5 → 6 → 7 → 8
    Lần nào cũng có breaking change và các developer phải migration, như vậy là quá nhiều. Trong khi nó cũng không tốt lên một cách ngoạn mục so với thời phiên bản 3
    Tôi không muốn đưa mức độ thay đổi không cần thiết và hỗn loạn liên tục như vậy sang phần còn lại của toolchain phát triển
    Nếu Vite+ rốt cuộc chỉ là bọc các công cụ hiện có bằng một giao diện dòng lệnh trừu tượng, thì để tạo ra hành vi mong muốn ta sẽ phải lần qua nhiều tầng gián tiếp hơn, nên tôi vẫn chưa lạc quan

    • Tôi đã theo tất cả các lần migration major và chúng khá trơn tru
      Không nhớ có vấn đề lớn nào, và nhìn chung lần nào cũng đáng
    • Tôi đã tự migration, nhưng không hề kinh khủng
      Có vài breaking change, nhưng tương đối cô lập, và tốc độ cùng các cải tiến giữa các phiên bản này là khá lớn
    • Chúng tôi cũng đã thực hiện tất cả các lần migration major đó nhưng không gặp lỗi vỡ hay churn lớn
      Tôi tò mò bạn đã gặp loại lỗi vỡ nào
    • Tôi khó đồng ý với việc nói rằng nó không tốt hơn mấy so với phiên bản 3
      Các tính năng bổ sung liên quan đến server-side rendering là cải tiến lớn
    • Tôi đã nâng một lần từ 4 lên 8 và chỉ cần đổi 5 dòng cấu hình
      Mong là mọi người thôi phàn nàn mãi về một vấn đề không tồn tại. Tôi còn nghi ngờ liệu họ có thật sự dùng các công cụ này không

  • Thật sự rất khó để theo kịp frontend, hoặc hệ sinh thái JavaScript
    Nhớ thời còn làm việc với Laravel, và ước gì các công việc dùng Laravel trả lương cao hơn

    • Chắc sẽ không muốn làm việc với Laravel Livewire và Alpine.js
      Nhưng vẫn phải tiếp tục theo kịp, và kết quả có thể cũng không mấy hài lòng
    • Thực ra không nhất thiết phải theo kịp
      Những thứ dùng trước đây vẫn hoạt động
    • Đồng cảm. Bên mình cũng đang từ từ thay thế monolith Laravel bằng Python Lambda
      Thật sự nhớ thời Laravel 6

  • Đây là cách đã hiệu quả với uv, nên nếu là một đội ngũ giỏi thì có lẽ cũng có thể làm điều tương tự trong JavaScript

    • Khá bất ngờ là trong phần bình luận chỉ có mỗi chỗ này nhắc đến uv
      Với tôi, đây là một đối tượng so sánh rất rõ ràng, và cũng là một bước tiến rất đáng hoan nghênh cho hệ sinh thái JavaScript
      Nhờ uv mà làm việc với Python lại trở nên thú vị

  • Không rõ có thể dùng cho build Node như Vite không, hay chỉ dành riêng cho trình duyệt

    • Vì dùng Vite nên các hạn chế cũng giống Vite
      Tuy vậy, mình đang dùng Vite cho server NestJS với vite-plugin-node mà không gặp vấn đề gì
      Xem ví dụ tại https://github.com/leosuncin/nest-vite-example/blob/master/v...
    • Đây là cấu hình như kiểu bùa chú của tôi, hoạt động tốt khi target Node: https://pastebin.com/ynz4B5X0
      Về cơ bản, chỉ cần giả vờ rằng bản thân là một thư viện
    • Mình cũng đang dùng Vite+ cho CLI
      Trong trường hợp này không dùng Vite làm dev server, nhưng vẫn có lint, formatting, chạy tác vụ và caching
    • Mỗi khi có ai đề xuất bundle code Node, tôi luôn tò mò về use case
      Lợi ích là gì? Có phải để obfuscate trong SEA không?

  • Không rõ cái này có kèm subscription không
    Cứ thấy tên có dấu “+” là cảnh giác, và mặc nhiên nghĩ rằng sẽ có subscription đi kèm
    Xem qua thì có vẻ không phải vậy

    • Tôi cũng nghĩ đến chuyện đó đầu tiên
      Giờ “$name+” đã ăn sâu như nghĩa là “dịch vụ subscription của $name”
    • Có ghi là “mã nguồn mở hoàn toàn theo giấy phép MIT”
    • Ban đầu có thể từng là ý tưởng như vậy, nhưng sau đó có vẻ đã được acqui-hire
    • Cái tên hơi đáng lo thật

  • Không rõ có thể dùng cùng Astro không