javascript - que - title tag html

¿Por qué los mapas fuente en línea?

Question

Hoy aprendí que es posible incluir mapas de origen directamente en su archivo JavaScript minificado en lugar de tenerlos en un archivo example.min.map separado. Me pregunto: ¿por qué alguien querría hacer algo así ?

El beneficio de tener mapas fuente es claro para mí: uno puede, por ejemplo, depurar errores con los archivos fuente originales no comprimidos mientras se ejecutan los archivos minificados. El beneficio de la minimización también es claro : el tamaño de los archivos fuente se reduce considerablemente, lo que hace que la descarga de los navegadores sea más rápida.

Entonces, ¿por qué en la Tierra desearía incluir los mapas fuente en el archivo minimizado, dado que los mapas tienen un tamaño aún mayor que el código minificado en sí ?

Answer 1

Busqué y la única razón por la que pude ver que los mapas fuente en línea de las personas es para uso en el desarrollo. Los mapas fuente en línea no deben usarse en la producción.

Lo racional para alinear los mapas de origen con sus archivos minificados es que el navegador está analizando exactamente el mismo JavaScript en el desarrollo y la producción. Algunos minificadores como Closure Compiler hacen más que "solo" minificar el código. El uso de las opciones avanzadas también puede hacer cosas como: eliminación de código muerto, alineación de funciones o cambio de nombre agresivo de variables. Esto hace que el código minimizado (potencialmente) sea funcionalmente diferente del archivo fuente.

Esto aún se puede hacer haciendo referencia a archivos de mapas de origen externos, por supuesto, pero algunas personas parecen preferir la inclusión en línea para su proceso de compilación.

Answer 2

En algunas situaciones, es posible que desee incluir mapas fuente en línea en el código evaluado. Por ejemplo, tiene un campo de entrada de coffeescript y desea habilitar la depuración del código en coffeescript. Hay una pregunta de sobre los mapas de origen en el código evaluado:

Hacer que los mapas fuente funcionen con el código evaluado

Puede incluir @sourceURL en sus comentarios para especificar una URL de su código de evaluación y cargar un archivo de mapa (consulte la página 8 de SourceMap Spec 3 ). Pero no siempre es posible escribir archivos en alguna ubicación.

Answer 3

Las herramientas de agrupación JS como Browserify o Webpack todos sus archivos .js ingresando uno o varios paquetes, incluso en modo de desarrollo. Entonces, en este caso, agregar el mapa fuente en línea a los paquetes generados es la forma más fácil de ayudar a depurar sin traer archivos adicionales.

Answer 4

Si está depurando Chrome de forma remota en un dispositivo Android, el depurador de Chrome no puede acceder simplemente a cualquier archivo que desee en el dispositivo y eso incluye archivos de mapas separados. Si los incluye en línea, no tiene este problema.

Answer 5

cheap-module-source-map es mucho mejor para una compilación de producción.

inline-source-map se usa para hacer compilaciones rápidas y sucias al probar