cuyos archivos javascript NO se están utilizando en la carga de la página

Question

¿Es posible encontrar qué archivos javascript NO se usan en una página web sin tener que agregar registros de la consola o depurarlos o eliminarlos para ver si se rompen?

Busco una herramienta, o un script de línea de comandos o plugin de firefox etc

Por ejemplo, digamos que esto lo he incluido en la cabecera:

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

En la página, las llamadas solo se realizan a las funciones en functions.js, validation.js y jquery.js. ¿Cómo puedo saber que something.js no se usa y, por lo tanto, se puede quitar de manera segura del encabezado?

He intentado rootear cosas como FireBug, la consola de Chrome, yslow y los registros del servidor, pero estos me dicen qué scripts se han cargado, es decir, todos, no cuáles se han utilizado.

Answer 1

AFAIK no existe un mecanismo de detección simple "este archivo está en uso/no está en uso", porque hay muchas maneras de llamar, extender y hacer referencia a cosas en JavaScript.

Hay docenas de formas de llamar a una función, p. en el evento click de un elemento, declaraciones eval() ... Podría extender el prototipo de una clase existente en un archivo de script ... etc. Además, podría estar obteniendo un nuevo marcado a través de AJAX que a su vez hace referencia a funciones de un cierto incluir, algo imposible de probar automáticamente sin recuperar el contenido.

A menos que alguien se le ocurra una herramienta que aborda exactamente esto (no digo que sea imposible, solo que es terriblemente difícil) Diría que resolver esto manualmente con un buen IDE y la función de búsqueda es la mejor manera para hacerlo.

Answer 2

Viniendo a esto desde una dirección diferente, podría buscar el uso (vago) de la carga de bibliotecas javascript. No podría decir lo apropiado sería en su situación, pero he visto mención de estos dos en la última semana, pero no he utilizado ninguno de los dos:

• http://plugins.jquery.com/project/lazy (sólo para la carga diferida de jQuery plugins?)
• http://labjs.com/ (no estoy seguro si esto hace la carga diferida?)

Answer 3

en respuesta a mi propia pregunta conseguir durante 7 años más tarde, las herramientas de desarrolladores de Chrome ahora tiene exactamente esta característica! https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 4

Solo tomó 7 años :) También quería señalar que puede automatizar esto con Navalia: https://github.com/joelgriffith/navalia.

Aquí está un ejemplo rápido:

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

Más aquí https://joelgriffith.github.io/navalia/Chrome/coverage/.