Share
Uno de los métodos más valiosos para optimizar su código JavaScript podría sorprenderlo: eliminarlo de sus archivos HTML por completo. En este video de mi curso La Guía del diseñador para la optimización de JavaScript, aprenderá cómo externalizar y minimizar JavaScript.
Una excelente manera de aumentar la eficiencia de nuestro código es mediante la externalización y minimización de nuestro código.
Cuando hablamos de externalizar nuestro código, lo que estoy hablando es sacar todo nuestro JavaScript de nuestras páginas HTML y colocar ese JavaScript en un archivo JavaScript separado, un archivo .js.
Es muy fácil de hacer. Solo tomarías todo dentro de la guión etiquetas, elimínelo y, a continuación, cree un nuevo archivo de texto con la extensión .js. Entonces simplemente usarías un guión etiqueta para apuntar a ese archivo.
Así que aquí hay un ejemplo. Tengo un archivo index.html con código JavaScript en su interior. Así que simplemente resalto todo dentro de la guión etiquetas y cortarlo.
Y luego podemos deshacernos de la guión Etiquetas en total al resaltarlas y eliminarlas.
Y luego voy a crear un nuevo archivo JavaScript dentro de mi carpeta de JavaScript y simplemente lo llamaré site.js.
No importa qué editor de texto estés usando. Estoy usando el código de Visual Studio aquí, pero también puedes usar corchetes o cualquier otro editor de texto plano. Pero lo estoy guardando como site.js, y simplemente pegaré todo ese código JavaScript en él..
Ahora no va a funcionar todavía porque todavía no estamos apuntando a este JavaScript en nuestro archivo HTML.
Pero podemos volver a nuestro index.html. Y luego, después de que hayamos cargado todas nuestras dependencias, crearemos nuestro propio guión etiqueta para cargar el archivo que acabamos de crear.
Así que está en nuestra carpeta de JavaScript js / y luego lo llamé site.js, entonces el código es:
Eso es realmente todo lo que se necesita para externalizar tu JavaScript.
Una de las grandes ventajas de tener su JavaScript en un archivo separado es que puede minimizar o minimizar ese código de JavaScript muy fácilmente. Y cuando tenga una versión reducida de su código, esa versión se ejecutará mucho más rápido, ya que será un archivo de menor tamaño..
Va a ser difícil leer o editar ese archivo minificado. Es por eso que guarda la copia original de su JavaScript para que, si necesita hacer cambios, realice cambios en ese archivo JavaScript original y luego vuelva a minimizarlo..
Ahora, ¿cómo minimizas? Hay varias opciones.
La mayoría de los editores de códigos modernos tienen complementos que minimizarán su JavaScript para usted. Por ejemplo, estoy usando código de Visual Studio. Si vamos a nuestras extensiones y solo hacemos una búsqueda de "reducir", puedes ver varias opciones para minimizar tu código.
Otro editor de texto gratuito en línea llamado Brackets también tiene extensiones que puedes usar para reducir el código. Entonces, si vas al administrador de extensiones para Brackets y haces una búsqueda de "minify", verás un minificador de JavaScript..
Tenga en cuenta que después de minimizar su código, debe cambiar el archivo al que apunta en el archivo HTML. Entonces, si minimizas site.js, entonces tendrías una nueva versión probablemente llamada site.min.js. Y así, en su HTML, desearía apuntar a esa versión minificada en lugar de a la versión original de su código. De lo contrario, toda esa minificación es inútil.
Si, por alguna razón, simplemente le gusta usar el bloc de notas para editar todo el código, aún puede minimizarlo y una forma de hacerlo es dirigiéndose a un sitio web como JSCompress.
Básicamente, esto solo le permite pegar su código y luego hacer clic en el Comprimir JavaScript botón, y verás que esto comprimió nuestro código en un 74%..
Esta es solo una pequeña porción de JavaScript, así que puedes imaginar que si tuvieras un montón de JavaScript en tu página, esto realmente te ahorraría mucho tamaño de archivo. Y cuando tienes un sitio web con mucho tráfico, eso te ayudará mucho..
Una de las ventajas de externalizar y minimizar su JavaScript es que le permite manejar el almacenamiento en caché un poco mejor.
Digamos, por ejemplo, que tiene una porción de código JavaScript que va a utilizar en varias páginas diferentes de su sitio web. Tendría sentido colocar esa pequeña parte del código JavaScript en su propio archivo JavaScript, de modo que una vez que el usuario lo visite una vez, ya esté en caché en su navegador. Luego, cuando visitan otra página que apunta al mismo archivo JavaScript, no tiene que volver a cargar ese JavaScript. Por lo tanto, se reducirá la cantidad de solicitudes que se realizan para esa pieza particular de JavaScript.
Si desea llevar esto al siguiente nivel, puede usar una Red de entrega de contenido (CDN) para almacenar versiones de sus archivos JavaScript en ubicaciones geográficamente diversas. Así que puedes tener tu JavaScript almacenado en servidores de todo el mundo.
El beneficio es que si ha creado su sitio web en Texas y alguien en el Reino Unido quiere acceder a su sitio web, entonces sin un CDN, ese usuario tendría que conectarse a su servidor para obtener todos los archivos que necesita..
Pero si su JavaScript está en un CDN, es probable que haya una versión de ese archivo JavaScript en un servidor en el Reino Unido o en algún lugar de Europa. Por lo tanto, estaría mucho más cerca de la ubicación de ese usuario, lo que significa que se descargaría más rápidamente y se ejecutaría con mayor facilidad..
Tenga en cuenta que un CDN cuesta dinero, por lo que realmente solo es algo que quiere seguir si está listo para ese próximo nivel. Pero realmente puede ayudar a acelerar su sitio web.
En el curso completo, la Guía del diseñador para la optimización de JavaScript, aprenderá más técnicas de optimización que son perfectas para los diseñadores web. Le mostraré algunas técnicas fáciles de implementar para hacer que su JavaScript, y por lo tanto sus sitios web, funcionen sin problemas.
Puede tomar este curso de inmediato con una suscripción a Envato Elements. Por una única tarifa mensual baja, obtiene acceso no solo a este curso, sino también a nuestra creciente biblioteca de más de 1,000 cursos de video y libros electrónicos líderes en la industria en Envato Tuts+.
Además, ahora obtiene descargas ilimitadas de la enorme biblioteca de Elementos Envato con más de 460,000 activos creativos. Cree con fuentes, fotos, gráficos y plantillas únicas, y entregue mejores proyectos más rápido.
Accentsconagua