tệp javascript nào KHÔNG được sử dụng khi tải trang

Question

Có thể tìm ra tệp javascript nào KHÔNG được sử dụng trên trang web mà không phải thêm nhật ký bảng điều khiển hoặc gỡ lỗi hoặc xóa chúng để xem mọi thứ có bị hỏng hay không?

Tôi đang tìm kiếm một công cụ, hoặc một kịch bản dòng lệnh hoặc firefox Plugin, vv

Ví dụ, chúng ta hãy nói rằng tôi đã những có trong các tiêu đề:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/functions.js"></script> 
<script type="text/javascript" src="js/validation.js"></script> 
<script type="text/javascript" src="js/something.js"></script> 

Trên trang, cuộc gọi chỉ được thực hiện cho các chức năng trong functions.js, validation.js và jquery.js. Làm thế nào tôi có thể biết rằng something.js không được sử dụng và do đó có thể được xóa khỏi tiêu đề một cách an toàn?

Tôi đã thử chạy qua các thứ như FireBug, bảng điều khiển của chrome, nhật ký máy chủ và máy chủ, nhưng tất cả đều cho tôi biết tập lệnh nào đã được tải, tức là tất cả các tập lệnh đó không được sử dụng.

Answer 1

AFAIK không có cơ chế phát hiện "tệp này đang được sử dụng/không sử dụng" đơn giản vì có quá nhiều cách để gọi, mở rộng và tham chiếu mọi thứ trong JavaScript.

Có hàng tá cách để gọi hàm, ví dụ: trong sự kiện click của một phần tử, eval() câu lệnh ... Bạn có thể mở rộng nguyên mẫu của lớp hiện có trong tệp tập lệnh ... v.v. Ngoài ra, bạn có thể tìm nạp đánh dấu mới thông qua AJAX so với chức năng tham chiếu lần lượt từ một số bao gồm, điều không thể tự động kiểm tra mà không tìm nạp nội dung. Trừ khi ai đó đến với một công cụ giải quyết chính xác điều này (tôi không nói nó là không thể, chỉ là nó là khủng khiếp khó) Tôi muốn nói làm việc này ra bằng tay với một IDE tốt và chức năng tìm kiếm là cách tốt nhất để đi về nó.

Answer 2

Đến đây theo một hướng khác, bạn có thể xem xét sử dụng thư viện javascript tải (lười). Tôi không thể nói như thế nào phù hợp này sẽ là trong tình huống của bạn, nhưng tôi đã thấy đề cập đến hai trong tuần trước, nhưng đã không được sử dụng một trong hai trong số họ:

• http://plugins.jquery.com/project/lazy (chỉ cho tải lười biếng của jQuery plugins?)
• http://labjs.com/ (không chắc chắn nếu điều này không lười biếng tải?)

Answer 3

Trong câu trả lời cho câu hỏi của riêng tôi nhận được trên 7 năm sau đó, các công cụ dev Chrome hiện có chính xác tính năng này! https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 4

Chỉ mất 7 năm :) Cũng muốn chỉ ra rằng bạn có thể tự động hóa điều này với Navalia: https://github.com/joelgriffith/navalia.

Dưới đây là một ví dụ nhanh:

import { Chrome } from 'navalia'; 
const chrome = new Chrome(); 

async function checkCoverage() { 
    await chrome.goto('http://joelgriffith.net/', { coverage: true }); 
    const stats = await chrome.coverage('http://joelgriffith.net/main.bundle.js'); 
    console.log(stats); // Prints { total: 45913, unused: 5572, percentUnused: 0.12135996340905626 } 
    chrome.done(); 
} 

checkCoverage(); 

More đây https://joelgriffith.github.io/navalia/Chrome/coverage/.