Crear sitios web que funcionen bien en todos los navegadores principales es un principio fundamental de un ecosistema web abierto. Sin embargo, esto significa trabajo adicional para garantizar que todo el código que escribas sea compatible con cada navegador al que deseas segmentar. Si quieres usar funciones nuevas del lenguaje JavaScript, debes transpilarlas a formatos retrocompatibles para los navegadores que aún no las admiten.
Babel es la herramienta más utilizada para compilar código que contiene una sintaxis más reciente en código que diferentes navegadores y entornos (como Node) pueden entender. En esta guía, se da por sentado que usas Babel, por lo que debes seguir las instrucciones de configuración para incluirlo en tu aplicación si aún no lo has hecho. Selecciona webpack en Build Systems si usas webpack como el agrupador de módulos en tu app.
Para usar Babel y transpilar solo lo que es necesario para tus usuarios, debes hacer lo siguiente:
- Identifica los navegadores para los que deseas segmentar tus anuncios.
- Usa
@babel/preset-envcon los destinos de navegador adecuados. - Usa
<script type="module">para dejar de enviar código transpilado a navegadores que no lo necesitan.
Identifica los navegadores para los que deseas segmentar tus anuncios
Antes de comenzar a modificar la forma en que se transpila el código de tu aplicación, debes identificar qué navegadores acceden a ella. Analiza qué navegadores están usando actualmente tus usuarios, así como aquellos a los que deseas segmentar tus anuncios para tomar una decisión informada.
Usa @babel/preset-env
La transpilación de código suele generar un archivo de mayor tamaño que sus formas originales. Si minimizas la cantidad de compilación que realizas, puedes reducir el tamaño de tus paquetes para mejorar el rendimiento de una página web.
En lugar de incluir complementos específicos para compilar de forma selectiva ciertas funciones del lenguaje que usas, Babel proporciona una serie de parámetros preestablecidos que agrupan complementos. Usa @babel/preset-env para incluir solo las transformaciones y los polyfills necesarios para los navegadores a los que deseas segmentar.
Incluye @babel/preset-env dentro del array presets en tu archivo de configuración de Babel, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Usa el campo targets para especificar las versiones de navegador que deseas incluir. Para ello, agrega una consulta adecuada al campo browsers. @babel/preset-env se integra en browserslist, una configuración de código abierto compartida entre diferentes herramientas para segmentar navegadores. En la documentación de browserslist, puedes encontrar una lista completa de las consultas compatibles.
Otra opción es usar un archivo .browserslistrc para enumerar los entornos a los que deseas segmentar.
El valor ">0.25%" le indica a Babel que solo incluya las transformaciones necesarias para admitir navegadores que representen más del 0.25% del uso global. Esto garantiza que tu paquete no contenga código transpilado innecesario para los navegadores que usan un porcentaje muy pequeño de usuarios.
En la mayoría de los casos, este es un mejor enfoque que usar la siguiente configuración:
"targets": "last 2 versions"
El valor "last 2 versions" transpila tu código para las dos últimas versiones de cada navegador, lo que significa que se proporciona compatibilidad con navegadores descontinuados, como Internet Explorer.
Esto puede aumentar innecesariamente el tamaño del paquete si no esperas que se usen estos navegadores para acceder a tu aplicación.
En última instancia, debes seleccionar la combinación adecuada de consultas para segmentar solo los navegadores que se ajusten a tus necesidades.
Habilita correcciones de errores modernas
@babel/preset-env agrupa varias funciones de sintaxis de JavaScript en colecciones y las habilita o inhabilita según los navegadores de destino especificados. Aunque esto funciona bien, se transforma una colección completa de funciones de sintaxis cuando un navegador de destino contiene un error con una sola función.
Esto suele generar más código transformado de lo necesario.
Originalmente desarrollado como un parámetro de configuración predeterminado independiente, la opción de correcciones de errores en @babel/preset-env resuelve este problema convirtiendo la sintaxis moderna que está dañada en algunos navegadores en la sintaxis equivalente más cercana que no está dañada en esos navegadores. El resultado es un código moderno casi idéntico con algunos pequeños ajustes de sintaxis que garantizan la compatibilidad en todos los navegadores de destino. Para usar esta optimización, asegúrate de tener instalado @babel/preset-env 7.10 o una versión posterior y, luego, establece la propiedad bugfixes en true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
En Babel 8, la opción bugfixes se habilitará de forma predeterminada.
Usa <script type="module">
Los módulos de JavaScript, o módulos ES, son una función relativamente nueva que es compatible con todos los navegadores principales. Puedes usar módulos para crear secuencias de comandos que puedan importar y exportar desde otros módulos, pero también puedes usarlos con @babel/preset-env para segmentar solo los navegadores que los admiten.
En lugar de consultar versiones específicas del navegador o el porcentaje de mercado, considera
especificar "esmodules" : true dentro del campo targets de tu archivo .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Muchas funciones más recientes de ECMAScript compiladas con Babel ya son compatibles con los entornos que admiten módulos de JavaScript. De esta manera, simplificas el proceso de asegurarte de que solo se use código transpilado para los navegadores que realmente lo necesitan.
Los navegadores que admiten módulos ignoran las secuencias de comandos con un atributo nomodule.
Por el contrario, los navegadores que no admiten módulos ignoran los elementos de secuencia de comandos con type="module". Esto significa que puedes incluir un módulo y una alternativa compilada.
Lo ideal es que las dos secuencias de comandos de versión de una aplicación se incluyan de la siguiente manera:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Los navegadores que admiten módulos recuperan y ejecutan main.mjs, y omiten compiled.js.
Los navegadores que no admiten módulos hacen lo contrario.
Si usas webpack, puedes establecer diferentes objetivos en tus configuraciones para dos versiones separadas de tu aplicación:
- Es una versión solo para navegadores que admiten módulos.
- Es una versión que incluye una secuencia de comandos compilada que funciona en cualquier navegador heredado. Esto tiene un tamaño de archivo más grande, ya que la transpilación debe admitir una gama más amplia de navegadores.
Agradecemos a Connor Clark y Jason Miller por sus comentarios.