Webpack → Vite: Di chuyển bundler của Storybook

Đã di chuyển bundler của Storybook từ Webpack sang Vite. Trong quá trình này, nhiều vấn đề đã phát sinh liên tiếp, và kết quả là phải thay đổi cả stack công nghệ hiện có.

Thay đổi stack công nghệ

• [Stack công nghệ cũ] Storybook v6.5, builder-webpack5, Node v18, Yarn 1
• [Stack công nghệ cuối cùng] Storybook v7, react-vite, Node v18, Pnpm

---

Các vấn đề phát sinh khi di chuyển

1. Vấn đề tương thích phiên bản giữa Webpack 4 và OpenSSL 3

• Mô tả vấn đề

  • Trong quá trình di chuyển từ builder-webpack5 sang builder-vite, đã phát sinh vấn đề tương thích phiên bản OpenSSL
  • Các phiên bản thấp hơn Webpack 5.61.0 dùng OpenSSL cũ, còn từ đó trở về sau thì dùng OpenSSL 3
  • Storybook v6 sử dụng Webpack 4 làm builder mặc định và cung cấp Webpack 5 như một tùy chọn
  • Khi đó đã chọn Webpack 5 và sử dụng builder-webpack5 dùng Webpack ^5.9.0, nên không phát sinh lỗi OpenSSL
  • Dù builder-vite đã di chuyển sử dụng Vite để build, Storybook v6 vẫn dùng Webpack 4 làm builder mặc định ở bên trong, nên phát sinh vấn đề tương thích phiên bản OpenSSL

• Cách giải quyết: Di chuyển sang Storybook v7

  • Trong Storybook v7, khi dùng Vite, Storybook không còn sử dụng Webpack4 ở nội bộ nên không phát sinh lỗi OpenSSL

2. Yarn 1 hoisting khiến sử dụng dependency khác phiên bản

• Mô tả vấn đề

  • Trong gói @isaacs/cliui, string-width@5 ở định dạng ESM và string-width@4 ở định dạng CommonJS(CJS) đang được dùng với alias là string-width-cjs
  • Vì Yarn 1 hoist các gói dependency trùng lặp lên root node_modules, nên một package có thể truy cập dependency mà chính nó không cài đặt
  • string-width@4 và @5 là sub-dependency được nhiều package dùng trùng lặp, nên đã bị hoist lên root node_modules
  • Trong các package string-width, cli-table3 ở định dạng CJS đã cố truy cập string-width@4, nhưng do alias nên không tồn tại cùng phiên bản đó, dẫn đến việc resolve sang string-width@5 ở định dạng ESM và phát sinh vấn đề tương thích module

• Cách giải quyết: Đổi package manager sang pnpm, nơi không phát sinh phantom dependency

[tk1583]

Câu hỏi. Có lý do nào khiến bạn không dùng esbuild-loader trong webpack không?

Trả lời.

Chúng tôi dùng Vite để tận dụng tính năng Native ESM.

Theo tôi biết, esbuild-loader là một loader cho phép dùng esbuild trong Webpack. Nếu dùng esbuild-loader thì tốc độ build sẽ rất nhanh, nhưng vẫn phải đi qua quá trình bundling.

Trong khi đó, với Native ESM thì chỉ những module đang được sử dụng mới được build và gửi tới trình duyệt, và khi module thay đổi thì cũng chỉ build lại module đã thay đổi nên nhanh hơn.

Với những trường hợp như Storybook, nơi chỉ yêu cầu một số component cụ thể, chúng tôi đánh giá rằng dùng Native ESM sẽ phù hợp hơn nên đã sử dụng Vite.