Avoid webpack bloat: Optimize your dependencies

Zillow · 2017 · 3. Quy mô lớn · Độ khó: Dễ — bài gốc

Bối cảnh

Mỗi dependency npm là một nguồn lỗi và bảo trì; thư viện phổ biến cũng phình dần (Moment.js 2,2 KB lúc 1.0 → hơn 20 KB gzip).

Mỗi lần push, build tính kích thước bundle webpack và đẩy vào Splunk để xem xu hướng; mỗi app có ngưỡng kích thước làm vỡ build.
Tháng 12/2016 ngưỡng bắt được một lần nhảy lớn: một module mới tách ra dùng lệch major version React, nên hai bản React cùng nằm trong bundle.
Viết công cụ mã nguồn mở webpack-stats-duplicates (đọc stats.json, tìm package có nhiều version) cùng plugin gulp để fail build khi có version trùng; trường hợp ngoài tầm kiểm soát thì whitelist.
Định kỳ soát dependency bằng webpack-visualizer: moment-timezone chiếm 10% một app nhưng chỉ dùng một chỗ, thay bằng hàm nhỏ.
Team Mortgages đặt hai điều kiện cho mọi dependency: cho thứ không tầm thường và thư viện chuẩn không có; được bảo trì có trách nhiệm.

Kích thước bundle như entropy, không can thiệp thì chỉ tăng; ngưỡng trong CI biến nó thành lỗi build thay vì phát hiện muộn ở production (CI và build ở quy mô lớn, Kiến trúc frontend).

Theo dõi kích thước artifact theo từng commit và đặt ngưỡng làm vỡ build.
Version trùng của cùng thư viện là nguồn phình phổ biến trong monorepo/multi-package; tự động phát hiện.