javacript 파일을 페이지로드시 사용하지 않는 경우

Question

콘솔 로그를 추가하거나 디버깅하거나 제거하지 않고 웹 페이지에서 사용하지 않는 JavaScript 파일을 찾을 수 있습니까?

나는 도구 또는 명령 줄 스크립트 나 찾고 있어요 파이어 폭스 플러그인 등

예를 들어, 내가이 헤더에 포함 있다고 가정 해 봅시다 :

페이지에

<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> 

, 호출은 functions.js, validation.js 및 jquery.js의 함수에만 호출됩니다. something.js이 사용되지 않아서 머리글에서 안전하게 제거 할 수 있다는 것을 어떻게 알 수 있습니까?

저는 FireBug, chrome의 콘솔, yslow 및 서버 로그와 같은 것들을 통해 근본적으로 시험해 보았습니다. 그러나 이것들은 어떤 스크립트가로드되었는지, 즉 어떤 스크립트가로드되었는지를 알려줍니다.

Answer 1

AFAIK JavaScript에서 호출, 확장 및 참조하는 방법이 다양하기 때문에 "이 파일은 사용 중이거나 사용하지 않음"감지 메커니즘이 없습니다.

함수를 호출하는 데 수십 가지 방법이 있습니다. 요소의 click 이벤트에서 eval() 문 ... 스크립트 파일 ... 등에서 기존 클래스의 프로토 타입을 확장 할 수 있습니다. 또한 AJAX를 통해 새로운 마크 업을 가져올 수 있습니다. 포함시키지 않으면 자동으로 내용을 가져 오지 않고 테스트 할 수 없습니다.

누군가가이 문제를 해결하는 도구를 사용하지 않는 한 (나는 불가능하다고 말하고있는 것이 아니라, 단지 끔찍한 것이기 때문에) 좋은 IDE와 검색 기능을 사용하여 수동으로 작업하는 것이 가장 좋은 방법이라고 말하고 싶습니다 그것에 대해 갈 것입니다.

Answer 2

다른 방향에서 오는이 경우, (게으른) 로딩 자바 스크립트 라이브러리를 사용할 수 있습니다. 나는이 상황에서이 얼마나 적절한 말할 수없는,하지만 난 지난 주에이 두 가지의 언급을 봐 왔지만, 그들 중 하나를 사용하지 않은 :

• http://plugins.jquery.com/project/lazy (만의 jQuery 게으른 로딩을 플러그인?)
• http://labjs.com/ (확실하지 않은이가하는 경우 게으른 로딩?) 내 자신의 질문 나중에 칠년 동안 얻기에
대답에

Answer 3

은, 크롬 개발 도구 지금 바로이 기능이! https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 4

단 7 년이 걸렸습니다. 또한 Navalia로 https://github.com/joelgriffith/navalia으로 자동화 할 수 있다고 지적하고 싶었습니다.

여기

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(); 

더 https://joelgriffith.github.io/navalia/Chrome/coverage/ :

여기에 빠른 예입니다.