Unused JavaScript Là Gì? Nguyên Nhân, Tác Hại Và Cách Xử Lý Triệt Để

Khi tối ưu hiệu suất website, một trong những yếu tố thường bị bỏ qua nhưng lại ảnh hưởng nặng nề đến trải nghiệm người dùng và điểm số Core Web Vitals chính là unused JavaScript. Vậy unused JavaScript là gì? Nó xuất hiện như thế nào trong quá trình phát triển web và làm sao để loại bỏ nó một cách an toàn? Bài viết này sẽ đi sâu vào bản chất của unused JavaScript, phân tích tác động thực tế và cung cấp hướng dẫn chi tiết để Định Nghĩa Chính Xác Dành Cho Developer

Unused JavaScript (hay còn gọi là dead code JavaScript) là những đoạn mã JavaScript được tải về trình duyệt của người dùng nhưng không bao giờ được thực thi trong quá trình tương tác với trang web. Điều này bao gồm các hàm, biến, module, thư viện hoặc toàn bộ file script mà ứng dụng không sử dụng đến ở thời điểm hiện tại, thậm chí có thể là không bao giờ sử dụng.

Ví dụ cụ thể: bạn import thư viện Moment.js (khoảng 50KB) để xử lý ngày tháng nhưng chỉ dùng đúng một hàm format(), phần còn lại của thư viện trở thành unused code. Hoặc khi bạn viết một hàm kiểm tra trình duyệt cũ cho một chiến dịch đã kết thúc và quên xóa nó, đoạn mã đó vẫn được tải và parse mỗi lần người dùng truy cập.

Khác với unused CSS (chỉ ảnh hưởng đến render), unused JavaScript chiếm băng thông, tăng thời gian tải, làm chậm quá trình parse, compile và thậm chí gây tốn RAM trên thiết bị di động.

Bản Chất Và Phân Loại Unused JavaScript

Để hiểu rõ cách xử lý, trước tiên cần phân loại unused JavaScript dựa trên nguyên nhân hình thành. Dead Code – Mã Chết Do Phát Triển

Đây là loại phổ biến nhất. Lập trình viên viết ra các hàm, class, module để phục vụ một tính năng nào đó, sau đó tính năng bị hủy bỏ hoặc thay đổi nhưng code cũ vẫn tồn tại. Dead code thường nằm rải rác trong dự án, khó phát hiện bằng mắt thường nếu không có công cụ hỗ trợ.

2. Code Chưa Được Gọi (Uncalled Code)

Những đoạn mã được viết với mục đích tương lai – ví dụ một tính năng sắp ra mắt nhưng đã được bundle vào bản production. Code này không active ở thời điểm hiện tại nhưng vẫn được tải xuống máy người dùng. Nếu không quản lý tốt, nó trở thành gánh nặng vô ích.

3. Thư Viện/Plugin Chỉ Dùng Một Phần Nhỏ

Các thư viện như lodash, jQuery UI, chart.js thường cung cấp rất nhiều phương thức. Nếu bạn chỉ dùng 10% API của chúng, 90% còn lại là unused JavaScript. Đây là lý do nhiều chuyên gia khuyên nên chọn thư viện nhỏ gọn hoặc tự viết hàm riêng khi cần ít tính năng.

Loại Unused JavaScript	Nguyên Nhân Chính	Mức Độ Phổ Biến
Dead code do phát triển	Code cũ không được xóa sau khi thay đổi tính năng	Rất cao
Code chưa được gọi (future feature)	Tính năng tương lai được bundle sẵn	Cao
Thư viện/plugin dùng một phần	Import toàn bộ thư viện nhưng chỉ dùng một phần nhỏ	Cao (đặc biệt với npm packages)

Tác Hại Của Unused JavaScript Đến Hiệu Suất Website

Unused JavaScript không chỉ là vấn đề “dọn dẹp mã nguồn” mà còn ảnh hưởng trực tiếp đến trải nghiệm người dùng và SEO. Trên thiết bị di động 3G/4G, điều này làm tăng đáng kể thời gian chờ đợi.

• Chiếm băng thông và pin thiết bị: Trình duyệt phải download, parse và compile code không cần thiết, gây hao pin và tiêu tốn dữ liệu di động của người dùng.
• Ảnh hưởng đến Core Web Vitals: Chỉ số Time to Interactive (TTI), First Input Delay (FID) và Total Blocking Time (TBT) đều bị kéo dài nếu có quá nhiều unused JavaScript trên trang.
• Giảm điểm Lighthouse và PageSpeed Insights: Google Lighthouse hiển thị cảnh báo “Remove unused JavaScript” nếu tỷ lệ code không dùng vượt ngưỡng, ảnh hưởng đến điểm SEO tổng thể.
• Rủi ro bảo mật: Dead code có thể chứa lỗ hổng bảo mật từ các phiên bản cũ của thư viện, tạo cơ hội cho hacker tấn công.

Cách Phát Hiện Unused JavaScript Trong Website Của Bạn

Không thể phát hiện unused JavaScript chỉ bằng cách đọc mã nguồn. Bạn cần sử dụng các công cụ chuyên dụng. Công cụ sẽ hiển thị tỷ lệ mã JavaScript được sử dụng (used) và không được sử dụng (unused) theo từng file.

Không hoàn toàn. Nếu xóa nhầm code đang được gọi gián tiếp (qua sự kiện, callback, hoặc từ bên thứ ba), trang web có thể bị lỗi. Cần kiểm tra kỹ bằng Coverage tool và chạy test trước khi xóa.

Làm thế nào để biết tỷ lệ unused JavaScript trên trang?

Mở Chrome DevTools > Coverage, nhấn Record và reload trang. Sau đó xem cột “Unused Bytes” để biết số byte không dùng. Lighthouse PageSpeed Insights cũng cung cấp thông tin này dưới dạng cảnh báo.

Unused JavaScript có ảnh hưởng đến SEO không?

Có. Google coi tốc độ tải trang là yếu tố xếp hạng. Unused JavaScript làm chậm TTI và TBT – hai chỉ số Core Web Vitals. Nếu điểm số thấp, thứ hạng tìm kiếm sẽ bị ảnh hưởng tiêu cực.

Có công cụ tự động loại bỏ unused JavaScript không?

Các bundler như Webpack, Rollup hỗ trợ tree shaking tự động khi cấu hình đúng. Tuy nhiên không có công cụ nào loại bỏ được 100% dead code – vẫn cần sự can thiệp thủ công để xóa code thừa do logic nghiệp vụ.

Unused JavaScript trong các dự án React/Vue có nhiều không?

Rất phổ biến. Các dự án SPA thường import quá nhiều component, thư viện mà không dùng hết. Tree shaking và code splitting là hai giải pháp bắt buộc cho React, Vue, Angular để giảm unused code.

Kết Luận

Unused JavaScript không chỉ là “rác” trong mã nguồn mà còn là gánh nặng hiệu suất thực sự. Hiểu rõ unused JavaScript là gì, cách phát hiện và loại bỏ nó sẽ giúp bạn xây dựng website nhanh hơn, thân thiện với người dùng hơn và đạt điểm SEO cao hơn. Quy trình tối ưu không phải làm một lần mà cần duy trì thường xuyên: thiết lập rule trong ESLint, dùng bundle analyzer mỗi lần build, và kiểm tra Lighthouse định kỳ. Hãy bắt đầu bằng cách kiểm tra Coverage trên trang quan trọng nhất của bạn ngay hôm nay – bạn sẽ bất ngờ với lượng code lãng phí đang tồn tại.