Chia sẻ các ca debug frontend của Cashnote - "Trên máy tôi thì chạy mà..."

 (spilist.notion.site)
11 điểm bởi spilist2 2021-09-23 | 2 bình luận | Chia sẻ qua WhatsApp

Chia sẻ 3 ca debug các vấn đề CSS mà đội frontend của Cashnote (https://cashnote.kr) đã gặp phải trong vài tháng qua khi vận hành sản phẩm React

  • Điểm chung là tất cả đều được phát hiện ở môi trường production, trong khi khi dùng CSS module trong create-react-app thì không gặp phải ở môi trường phát triển

Vấn đề 1: Từ sau khi vào một trang cụ thể, hình ảnh ở mọi trang đều bị méo

  • Nguyên nhân là CSS style được định nghĩa theo cách mà CSS module không thể hash được

  • Đã giải quyết bằng cách thêm plugin stylelint để ngăn không cho định nghĩa kiểu style này

Vấn đề 2: CSS style hiển thị khác nhau giữa môi trường phát triển và môi trường production

  • Một component cụ thể đang override style của component trong design system, nhưng ở môi trường production thì thời điểm CSS của component design system được inject vào muộn hơn, nên style override không được áp dụng

  • Ban đầu đã giải quyết bằng cách sửa cấu hình Webpack, nhưng không hài lòng vì đó là quyết định đánh đổi hiệu năng của môi trường production

  • Trong lúc tìm cách khác, đã phát hiện có thể cho phép override bằng cách thay đổi cấu hình bundler (rollup) phía design system. CSS do design system inject vào được thay đổi để luôn nằm ở phần trên của head

Vấn đề 3: Chạy ở môi trường phát triển thì không có vấn đề nhưng build production lại thất bại

  • Trong quá trình plugin Webpack tạo CSS Chunk, build production thất bại vì cảnh báo rằng hai file CSS được import theo thứ tự khác nhau, nên hai chunk có thể tạo ra kết quả style khác nhau

  • Vì Cashnote dùng CSS module nên mỗi file CSS đều hoạt động độc lập, do đó order conflict không tạo ra kết quả style khác nhau. Vì vậy đã thay đổi cấu hình Webpack để bỏ qua cảnh báo này

Hai vấn đề sau tuy hiện tượng bề mặt khác nhau, nhưng đều giống nhau ở chỗ chúng bắt nguồn từ “thiếu hiểu biết về cách framework frontend create-react-app vận hành trong môi trường production”

  • Để cải thiện tận gốc, nhóm đang nâng cao hiểu biết về CRA và Webpack, đồng thời chuẩn bị để tiến tới loại bỏ CRA

Bài viết liên quan

2 bình luận

 
xguru 2021-09-23

Cảm ơn bạn đã chia sẻ một trải nghiệm thú vị. Đúng là ở môi trường local thì lúc nào mọi thứ cũng chạy tốt nhỉ!
 
spilist2 2021-09-23

Cảm ơn bạn. Việc tóm tắt bài viết một cách ngắn gọn cũng không hề dễ nhỉ haha