Recientemente, aparecieron un par de art铆culos interesantes sobre Habr茅. El primero se dedic贸 al problema de
minificaci贸n de ES6 , el segundo sobre
consejos 煤tiles generales de optimizaci贸n de paquetes web .
Todo estar铆a bien, pero ambos pasaron por alto el problema de dividir paquetes en ES6 y ES5 para la minificaci贸n y otros fines de optimizaci贸n. Y en general, mientras algunos escriben y escriben
art铆culos al respecto , otros (casi todos) ignoran esta t茅cnica.
Porque por mucho tiempo. Caro Y no tanto.
Pero es necesario de forma r谩pida, econ贸mica y m谩s tonta. Quiz谩s deber铆as revertir la evoluci贸n.
Idea
Describir una "idea" no es una buena idea. Es mejor describir c贸mo deber铆a funcionar. C贸mo deber铆a funcionar el proceso de formaci贸n de paquetes:
- Tengo un codigo
- Lo compilo bajo mi navegador de "desarrollo"
- y todo funciona
El navegador de desarrollo est谩 aqu铆 para que as铆ncrono / espere, generador, clases, funciones de flecha, etc. En general, objetivo: esm贸dulos en la babel.
No s茅 sobre ti, pero me gusta esta idea. Estos son solo los navegadores antiguos que todav铆a est谩n entre nosotros, esta idea no encaja de esa manera.
(y, por lo tanto, todos silbamos en producci贸n en 5, condimentando con medio megabyte de polyfills)Y eso es exactamente lo que hay que arreglar.Devoluci贸n
Devolution es una peque帽a utilidad cli que lleva su paquete compilado al objetivo: esmodules y lo degrada a es5, agregando todos los polyfiles necesarios en el camino.
En resumen, entonces:
- todos los scripts js son
- ejecuta babel con un complemento activo (fork useBuiltins: "uso") que define los polyfiles requeridos. Esto es r谩pido, ya que no hay transformaciones.
- para cada archivo, se recopilan todos los pol铆filos que necesita (menos los que ya est谩n en el paquete principal), se fusionan, se ejecutan a trav茅s de terser y se agregan a la parte superior del archivo.
- cada archivo se ejecutar谩 a trav茅s de swc, una versi贸n oxidada de babel que elimina la actualizaci贸n del c贸digo a un nivel que IE11 entiende. Funciona 10-60 veces m谩s r谩pido que Babel. No es compatible con varios complementos, pero esto no es necesario: todo lo que se necesita est谩 __ ya__ aplicado.
- terser se superpone una vez m谩s en el resultado, pero con la funci贸n mangle desactivada (compresi贸n de nombre), que de nuevo es r谩pida.
- Todo esto se hace en los trabajadores.
Ejecut茅 el c贸digo en tres proyectos de diferentes niveles de dificultad:
- proyecto 1, 60 archivos js finales (divisi贸n de c贸digo). Tiempo de construcci贸n 400 s. Devoluci贸n 30s.
- proyecto 2, 1 archivo js final (30mb). Tiempo de construcci贸n 120 s. Devoluci贸n 10s.
- proyecto 3, 1 archivo js final (2mb). Tiempo de construcci贸n 20 s. Devoluci贸n 5s (al comienzo de los trabajadores se pierden muchas cosas).
La bonificaci贸n del paquete ESM fue un poco extra帽a:
- un proyecto perdi贸 400kb de babel / polyfill. No se usaron nada "sobre" chips del navegador all铆, y en "esm" no necesitan ser pulidos
- un proyecto perdi贸 10% debido al c贸digo mucho m谩s compacto de generadores, async / wait y constructores de clase
- Un proyecto ha engordado, ya que las transformaciones de babel "sueltas" a veces hacen que el c贸digo sea m谩s compacto. Pero el modo suelto es una opci贸n poco peligrosa, mientras que el c贸digo "ES6" es "seguro".
Una vez m谩s:
- tomamos el c贸digo ES6 (m谩s precisamente esmodule, let / const ser谩 reemplazado por var para fines de velocidad)
- hacer de ella ES5
- tirar del lado de los polifilos
- dispersarse en papis, agregar enlaces simb贸licos a otros archivos
- Cambiamos la conexi贸n de los scripts a las p谩ginas a un poco m谩s inteligente (los m贸dulos / n贸dulos IE11 no entienden)
- hecho: ESM para el 85% de los medidores personalizados, ES5 para aquellos en el tanque.
Simple R谩pido Solo estupido. Eliminamos la actualizaci贸n del paquete. Viejos navegadores! Au - servido.
Bueno, los nuevos navegadores recibir谩n un paquete con casi ning煤n relleno de polietileno, sin terribles transformaciones de generadores y as铆ncrono / espera, con funciones de flecha sin panderetas (y generalmente son m谩s r谩pidas). En general, todos est谩n contentos, parece que esto fue originalmente pensado.
github.com/thekashey/devolutionPD: En realidad, en este momento, la devoluci贸n no usa swc , ya que a veces hace que el c贸digo no funcione bien - github.com/swc-project/swc/issues/280 , Babel no es mucho m谩s lento - donde se corrigi贸 swc En 20 segundos, Babel puede hacerlo en un minuto. Con un tiempo de construcci贸n "normal", de 5 en adelante, esta es una gran ventaja
PD: Si de repente se volvi贸 interesante por qu茅 la devoluci贸n, el
video est谩 aqu铆 .