Estoy aprendiendo JavaScript y uno de mis métodos de aprendizaje que uso (igual que html, CSS/SCSS) es leer el código fuente para aprender el idioma y tratar de entender lo que está sucediendo.
Pero tengo problemas con JavaScript, ya que está lleno de letras aleatorias y no puedo descifrar qué está haciendo el código. ¿Existe un proceso de cambio del código JavaScript (nombres de variables, etc.) cuando el archivo se minimiza y se publica en la web con el resto de los archivos del sitio web?
Depende de qué minimizador u optimizador esté usando, pero supongo que cualquier optimizador de calidad debería reducir los nombres de las variables a versiones más cortas.
Usando TerserWebpackPlugin:
// src/index.ts const greeting = 'Hello World!' console.log(greeting) export default { greeting: greeting, }Compila a:
// /lib/build.js ...{return(()=>{"use strict";var e,r,n,t,o,i={607:(e,r,n)=>{nr(r),nd(r,{default:()=>o});const t="Hello World!";console.log(t);const o={greeting:t}}},d={};function c(e){var r=d[e];... El greeting variable se cambió a t .
Lo que también tendría sentido porque si tiene 10k variables en su proyecto, cada una de ~10 letras de largo, reducirlas a 1 letra sería una reducción de 10k * 9 = 90kb en el tamaño del paquete.
Si desea estudiar el código javascript, no lo haga con versiones reducidas del código, es increíblemente difícil leer dicho código.
JavaScript, como lenguaje interpretado, no está siendo compilado. Una de las desventajas de esto es que se supone que el código es legible por humanos pero también lo más pequeño posible para tener páginas web rápidas.
Es por eso que las herramientas de desarrollo web incluyen "paquetes" (como Webpack o Rollup) que ayudan a reducir la cantidad de archivos agrupándolos, eliminan el código no utilizado (también conocido como sacudir árboles) y minimizan el código al reducir la cantidad de caracteres tanto como sea posible. posible sin cambiar el comportamiento del código.
Por ejemplo:
var variable se convierte en var atrue se convierte en !0false se convierte en !1Incluso los objetos globales se pueden minimizar usando este patrón:
(function(window) { // You can write code that uses window while window is eligible to minification // Because it's a regular variable in this context })(window)Existen muchas otras técnicas de minificación...
Cuando el código se ha minimizado, es imposible revertirlo, a menos que se haya creado con mapas de origen que hacen que el código parezca que no está minimizado en el depurador.
Si los mapas fuente no existen para el código que está realizando ingeniería inversa, entonces no tiene ninguna solución a menos que el código fuente sea público. En ese caso, probablemente podrá encontrarlo en https://www.github.com