Phát hiện các tệp được liên kết và không sử dụng và JavaScript chưa sử dụng

Question

Tôi vừa hoàn thành trang web của mình, mà tôi đã bắt đầu cách đây 2 năm. Tôi đã luôn luôn thử những điều mới, mà đôi khi bao gồm việc thêm các khung công tác khác nhau hoặc các tệp JS bên ngoài khác.

Bây giờ tôi không biết các tệp/dòng liên kết của JS nào không được sử dụng. Có công cụ nào có thể phát hiện các tệp và dòng mã này không? Nó sẽ giúp tôi tiết kiệm rất nhiều thời gian.

Answer 1

This câu trả lời cung cấp Google's Closure Compiler trong đó, trong quá trình rút gọn và ghép nối mã JavaScript của bạn, có thể xóa "mã chết".

Trích dẫn từ the documentation cho mức biên soạn:

Compilation với ADVANCED_OPTIMIZATIONS loại bỏ mã mà là provably unreachable. Điều này đặc biệt hữu ích khi kết hợp với các thư viện lớn. Nếu bạn chỉ sử dụng một vài hàm từ một tệp thư viện lớn, trình biên dịch có thể loại bỏ mọi thứ ngoại trừ các hàm đó từ đầu ra của nó.

Xem thêm this answer, trong đó có thêm thông tin về Trình biên dịch đóng cửa của Google.

Answer 2

Đối với câu trả lời này, tôi không chắc liệu nó có hữu ích hay không. Làm thế nào về cố gắng Sonar. Sonar có một plugin javascript có thể kiểm tra chất lượng mã js của bạn và liệt kê mã không sử dụng.

Answer 3

Tôi đã tìm kiếm một công việc giống nhau trong vài tuần qua bản thân mình và kết thúc với powershell truy vấn sau đây:

PS> Get-ChildItem -Path C:\PathToProject\ -Filter *.as?x -Recurse 
| select-string -pattern "src=""([^""]*.js)""" 
| Select -Expand Matches | Foreach { $_.Groups[1].Value } | select -unique 

Đầu tiên nó đệ quy sẽ chọn tất cả các file .aspx và ascx trong thư mục dự án của chúng tôi , sau đó tìm thấy giá trị thuộc tính src tham chiếu đến tệp .js (có lẽ là các phần tử tập lệnh) và theo dõi các giá trị khác biệt - thì đấy, bạn có danh sách tệp .js được tham chiếu trong dự án của bạn!

Sẽ khá đơn giản để điều chỉnh truy vấn sao cho phù hợp với dự án cụ thể và cấu trúc của nó. Đảm bảo bạn không lặp lại các tệp đã lỗi thời có thể bao gồm các tham chiếu lỗi thời. Tài khoản cho các lần đánh dấu sự đánh dấu - bạn có thể đã sử dụng dấu nháy đơn cho các giá trị thuộc tính trong quá khứ hay không gian trắng không cần thiết xung quanh ký hiệu "bằng" hay cả hai? Bạn có thể bao gồm các tệp này theo chương trình hoặc không đồng bộ từ bên trong các tệp js khác không? v.v.

Answer 4

Tôi đã có nhu cầu này nên tôi đã tạo một công cụ phát hiện JS không sử dụng ở phía trình duyệt, không chỉ từ các nguồn, vì vậy nó cũng có thể kiểm tra các kịch bản của bên thứ ba.

Tính năng này hoạt động bằng cách tạo proxy cục bộ trên máy tính của bạn chặn các yêu cầu JavaScript và các công cụ này các tệp này một cách nhanh chóng. Công cụ này có khả năng phát hiện phần nào của các tập tin được thiết bị đã được sử dụng bởi trang, và không.

Tôi đã tạo mã nguồn mở và bạn có thể tìm thấy ở đây: https://github.com/gmetais/unusedjs.