Đây là quá trình mình đã làm để cải thiện hiệu suất của app:
Ở thiết lập ban đầu mình dùng trong webpack, CSS của app được tích hợp vào trong file bundle.js. Bên cạnh đó, các thư viện CSS khác như normalize & font-awesome mình tạo request riêng đến CDN chứa nó (không import trong CSS của mình).
Sau khi kiểm tra với Timeline trong Chrome Dev Tools: đã bật Disable Cache & chọn preset Slow 3G ở mục Network Throtling, mình thấy file bundle.js mất đến hơn 10s để request, download & execute, rồi sau đó các file khác mới được bắt đầu request (các file font). Vì vậy, để cải thiện thời gian tải về, mình quyết định tách CSS ra khỏi file bundle.js thành 1 file CSS riêng (style.css) bằng module extract-text-webpack-plugin (plugin của webpack).
Trong style.css mình cũng import normalize vào để ko phải mất 1 parallel download cho file normalize.css*, nhưng với font-awesome thì mình vẫn dùng nó trên CDN (vì đối với các file font (woff, woff2,…), khi app của mình gửi request đến CDN, chúng sẽ được download nhanh hơn nhiều so với khi gửi request đến host của mình). Bên cạnh đó, file CSS riêng này cũng được request gần như đồng thời với file bundle.js nên mục đích chính của nó là làm giảm kích thước của bundle.js xuống chứ ko phải ôm đồm tất cả mọi thứ liên quan đến CSS.
*: vì theo mặc định, các trình duyệt sẽ giới hạn số kết nối được hoạt động đồng thời đối với mỗi domain, ví dụ đối với Chrome tối đa là 6 kết nối - đọc thêm ở đây
Qua đó, kích thước file bundle.js giảm và thời gian download của nó được cải thiện, kéo theo đó là các assets khác (các file font) sẽ được request ở 1 thời điểm sớm hơn.
Kết quả: thời gian download tổng đã giảm xuống, DOMContentLoaded < 10s, Load < 15s.
