DEV Community

Review Laptop
Review Laptop

Posted on • Originally published at reviewlaptop.vn

Dùng Vite thay Webpack có thật sự giảm 90% thời gian build

#frontend #vite #webpack #performance

Đổi từ Webpack sang Vite chưa chắc đã giải quyết được mọi nghẽn cổ chai nếu cấu hình dự án sai cách. Nhiều developer tin rằng chỉ cần đổi bundler là tốc độ phản hồi HMR sẽ tự động nhanh gấp mười lần mà không cần quan tâm đến dung lượng thư viện hay cấu hình cache.

Cold build và HMR: Khác biệt ở cơ chế xử lý

Webpack khởi chạy dev server bằng cách quét toàn bộ cây phụ thuộc, gom tất cả module thành một hoặc nhiều bundle file trước khi lắng nghe kết nối. Khi dự án phình to lên hàng nghìn file, thời gian cold build của Webpack kéo dài thấy rõ. Ngược lại, Vite không bundle trước trong môi trường dev. Công cụ này tận dụng tính năng Native ESM của trình duyệt hiện đại và giao việc biên dịch module cho esbuild (viết bằng Go).

Khi sửa code, độ trễ HMR latency của Vite chỉ tính bằng miligiây vì trình duyệt chỉ gọi lại đúng module vừa thay đổi qua HTTP request. Với Webpack, dù có Hot Module Replacement, bundler vẫn phải xử lý lại cây module và tạo patch file để đẩy qua WebSocket.

Về lượng tiêu thụ RAM usage, Webpack giữ lại cache phức tạp trong bộ nhớ Node.js để phục vụ cho incremental build. Điều này khiến process Node.js chiếm nhiều dung lượng RAM khi dev server chạy liên tục. Vite đẩy các tác vụ nặng cho bộ biên dịch ngoài nên giữ mức chiếm dụng bộ nhớ ổn định hơn.

Cấu hình tối ưu thực tế cho hai công cụ

Đừng vội kết luận Webpack chậm nếu chưa khai thác đúng tính năng cache và các bộ loader thế hệ mới như swc-loader hay esbuild-loader.

Với dự án Webpack, kích hoạt persistent cache trên ổ đĩa giúp giảm đáng kể thời gian khởi động ở những lần tiếp theo:

// webpack.config.js
module.exports = {
  cache: {
    type: 'filesystem'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: { loader: 'swc-loader' }
      }
    ]
  }
};
Enter fullscreen mode Exit fullscreen mode

Đối với Vite, cấu hình optimizeDeps giúp kiểm soát tốt các phụ thuộc lớn, tránh việc dev server phải phân tích lại dependency mỗi khi khởi động:

// vite.config.js
export default {
  optimizeDeps: {
    include: ['react', 'react-dom', 'axios']
  }
};
Enter fullscreen mode Exit fullscreen mode

Tương tự quy trình tạo khuôn mẫu chuẩn hóa được phân tích trong bài gốc, việc nâng tốc độ build frontend đòi hỏi kiểm soát đúng luồng dữ liệu thay vì kỳ vọng vào các công cụ mặc định.

  • Chọn Vite khi khởi tạo dự án mới để có tốc độ phản hồi tức thì và tiết kiệm RAM.
  • Giữ Webpack nếu dự án phụ thuộc sâu vào hệ thống plugin cũ, nhưng bắt buộc phải nâng cấp loader sang SWC hoặc ESbuild.

Top comments (0)