javascript - superior - evitar cache html
Optimización: ¿Hay alguna forma de encontrar y eliminar CSS y Javascript que no se usan y son comunes a todas las páginas html? (7)
Abra chrome DevTools , en Auditorías , puede Auditar el estado actual o recargar la página y Audit on Load
Luego, bajo Rendimiento de página web, hay una sección que dice: "Eliminar las reglas CSS no utilizadas
Ahora, cuando lo usé, vi que estaba enumerando algunos css que estaba usando. El problema se encontraba en el estado actual en el que no se estaba usando, así que si está cambiando de clase, obviamente lo mostrará si la clase no está actualmente aplicado.
Por cierto, si eso no aparece, que yo sepa, funciona en canary chrome. Tampoco recuerdo si habilité una bandera para esto. (No lo creo)
Mi sitio web tiene muchas páginas web y estoy tratando de limpiar mis hojas de estilo y scripts. Alrededor del 10% o más de cada js / css no está siendo utilizado por ninguna de las páginas html en mi sitio web. Lo que necesito es eliminar los archivos css y js no utilizados y redundantes comunes. Hice un poco de investigación y encontré this . Pero no es gratis.
NOTA:
- Algunos de los js / css están siendo llamados por más de una página html y todavía hay una parte de cada js / css que no está siendo utilizada por ninguna de las páginas html que los están llamando.
- Mi sitio web solo es compatible en Chrome.
Conoces bien tu código, pero esto debería ayudarte a hacer todo el trabajo que acabas de leer. Limpieza de primavera CSS no utilizado con ronco, trago, brócoli o brunch
En primer lugar, hay soluciones completas, algunas de las cuales probablemente ya están referenciadas en SO, pero no estoy familiarizado con ninguna de ellas, y es probable que muchas cuesten dinero. Si yo fuera tú, empezaría a buscar con las palabras clave "limpiar la pelusa css" y "limpiar la pelusa javascript" o algo similar. Yo no iría y escribiría mi propio código para este propósito.
Ahora, si no fuera usted o después de algunas horas de búsqueda todavía no había encontrado nada que satisficiera mis necesidades, podría decidir intentarlo yo mismo. Lo que podría hacer si está dispuesto a ensuciarse, al menos para el CSS, es ejecutar un script localmente para ejecutar cada archivo HTML servido y
- Extraiga todas las hojas de estilo de referencia de cada uno, haciendo una lista
- Extraiga los nombres de todas las clases de CSS e identificadores de cada uno, haciendo una lista
- Haga coincidir la lista con las clases y los ID realmente utilizados en el HTML
- Haga una lista de todos los que no lo son y guárdela en un archivo para acceder fácilmente
Puedes lanzar algo como esto juntos en Python en unas pocas horas si estás familiarizado con él. Por supuesto, esto depende del idioma que utilice para realizar scripts rápidos y sucios.
Analizar archivos javascript sería un poco más difícil, debido a los problemas con la lógica. Podría hacer algo similar, pero quizás no le interese escribir básicamente su propio intérprete de javascript para limpiar algunas funciones no utilizadas. Sí, debes codificarlo, pero estarías reinventando la rueda. En realidad, podría ser una buena idea ver los IDE que tienen esta funcionalidad incorporada. Algunos son gratuitos y, lo más importante, no tiene que escribirlos usted mismo.
Puede usar GTmetrix para limpiar el código CSS en http://gtmetrix.com/remove-unused-css.html . Dar la URL y presionar GO!
http://www.peterbe.com/plog/mincss es una herramienta que cuando se le asigna una URL (o varias URL) descarga esa página y todo su CSS y compara todos y cada uno de los selectores en el CSS y descubre cuáles no. usado. El resultado es una copia del CSS original pero con los selectores que no se encuentran en el documento (s) eliminado (s).
También puede utilizar la herramienta de auditoría de Google Chrome. Consulte este sitio web http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/
o puedes usar las extensiones google chrome
Puedes usar el siguiente enlace de mención y limpiar tu código html y css.
Sí, deberías usar el complemento grunt-uncss de Addy Osmani para limpiar el CSS no utilizado. No estoy seguro de si puede usar una herramienta para eliminar JS no utilizados, ya que depende de la lógica de la aplicación, a qué parte del código JS se llamará.
Helium CSS es una herramienta javascript para descubrir CSS no utilizado en muchas páginas de un sitio web. Primero debe instalar el archivo javascript en la página que desea probar. Luego, tienes que llamar a una función de helio para iniciar la limpieza.
CSSESS es un bookmarklet que le ayuda a encontrar selectores de CSS no utilizados en cualquier sitio. Esta herramienta es bastante fácil de usar, pero no te permitirá configurar y descargar archivos CSS limpios. Sólo listará los archivos CSS no utilizados.