Sử dụng phía máy chủ ít hơn (css preprocessor) hoặc phía máy khách

Question

Ưu điểm/nhược điểm của việc sử dụng phía máy chủ ít hơn so với phía khách hàng trong môi trường sản xuất trực tiếp là gì? Tại sao tôi muốn chuyển đổi css ít thành tĩnh của tôi và sử dụng nó khi đi trực tiếp thay thế? Như tôi đã hiểu, css được lưu trữ ở cả server và client nên tốc độ không phải là vấn đề và js không có sẵn không phải là vấn đề vì ứng dụng của tôi phụ thuộc rất nhiều vào javascript vì vậy nếu nó không có sẵn, tôi sẽ có vấn đề lớn hơn. Tôi không hiểu hoàn toàn về cách biên dịch phía máy chủ hoạt động .... cảm ơn

Answer 1

Tôi đã làm việc trên một dự án lớn sử dụng LESS. Vấn đề chính mà chúng tôi gặp phải là biên dịch client (trong môi trường phát triển) là vì biên dịch phía máy khách yêu cầu JavaScript và in hiển thị trang thành giấy mà không cần JavaScript, vì vậy bất cứ khi nào ai in một trang, nó sẽ hoàn toàn không bị cản trở. Ngay cả khi ứng dụng của bạn sử dụng số lượng lớn JavaScript như của chúng tôi, nếu bạn muốn hỗ trợ in, bạn cần phải biên dịch phía máy chủ hoặc cung cấp CSS tĩnh.

Giải pháp phù hợp nhất với chúng tôi là chạy node.js để biên dịch LESS phía máy chủ khi đang trong môi trường phát triển, sau đó biên dịch nó thành tệp css được nén gzip duy nhất khi triển khai trang web để sản xuất.

Biên dịch trước cũng làm giảm số lượng yêu cầu tệp riêng lẻ của khách hàng từ hàng chục trang trong trường hợp của chúng tôi (mỗi tệp LESS) thành tệp CSS duy nhất và làm cho tải nhanh hơn bằng cách tránh bước biên dịch (mà less.js phía máy khách phải chạy mỗi lần một trang mới được điều hướng đến trước khi trang có thể bắt đầu hiển thị.)

Tôi không khuyên bạn nên biên dịch phía máy chủ trong môi trường sản xuất trực tiếp, bởi vì điều đó sẽ thêm rất nhiều tải bộ vi xử lý không cần thiết. Nếu bạn biên dịch trước, nó sẽ không tiêu tốn tài nguyên máy chủ nào nhiều hơn một tệp CSS thông thường.

Answer 2

Trình duyệt chỉ có thể lưu trữ dữ liệu mà nó nhận được từ máy chủ. Điều này không không bao gồm CSS được biên dịch trong trình duyệt từ ít hơn (cơ chế lưu trữ cục bộ HTML5 sang một bên). Điều này có nghĩa là trình duyệt sẽ phải biên dịch ít tệp hơn thành CSS mỗi khi chúng được tải - ngay cả khi tệp ít được tải từ bộ nhớ cache của trình duyệt thay vì từ máy chủ.