Recientemente estuve investigando el paquete acumulativo y viendo cómo se diferencia de Webpack y otros paquetes. Una cosa que encontré fue que es mejor para las bibliotecas debido a la "agrupación plana". Esto se basa en un tweet y en un PR reciente de React para utilizar Rollup .
En mi experiencia, Rollup es mejor en la creación de bibliotecas debido a mejores optimizaciones en torno a la agrupación plana (por ejemplo, elevación). 1/2
Sin embargo, Webpack 2 puede ser mejor para usted si está empaquetando aplicaciones con división de código, etc. 2/2
Sin embargo, no estoy completamente seguro de entender lo que eso significa. ¿A qué se refiere la agrupación plana? Sé que la documentación de Rollup menciona el treeshaking para ayudar a reducir el tamaño del paquete, pero Webpack también tiene una forma de hacerlo . Tal vez simplemente no entiendo el concepto por completo.
Tenga en cuenta que esta NO es una pregunta de comparación con respecto a Rollup vs Webpack. Para las personas interesadas en eso, hay un cuadro de comparación de Webpack . Esto es principalmente para preguntar qué es la agrupación plana. Y potencialmente, ¿qué hace Rollup internamente para lograr esto?
Editar: Rollup admite la división de código: lea el artículo
Editar: Webpack ahora admite elevación de alcance en algunas situaciones; lea la publicación del blog aquí
Probablemente todos tengamos diferentes definiciones para estas cosas, pero creo que la agrupación plana simplemente significa 'tomar sus módulos y convertirlos en un solo paquete', es decir, el 'plano' es redundante. La gran diferencia en React 16 es que consumirá un paquete prefabricado de manera predeterminada, en lugar de que su aplicación sea responsable de agrupar los módulos fuente de React (aunque siempre hubo un paquete UMD prediseñado de React disponible , creado con Browserify).
Más bien, la gran diferencia entre los dos es lo que sucede en los límites del módulo . La forma en que funciona el paquete web es que envuelve cada módulo en una función y crea un paquete que implementa un cargador y un caché de módulo. En tiempo de ejecución, cada una de esas funciones del módulo se evalúa a su vez para llenar el caché del módulo. Esta arquitectura tiene muchas ventajas: hace posible implementar características avanzadas como la división de código y la carga bajo demanda, y el reemplazo de módulos en caliente (HMR).
El resumen adopta un enfoque diferente: coloca todo su código en el mismo nivel (reescribiendo los identificadores según sea necesario para evitar conflictos entre los nombres de las variables, etc.). Esto a menudo se denomina ' elevación del alcance '. Por eso, no hay gastos generales por módulo ni gastos generales por paquete. Se garantiza que su paquete será más pequeño y también se evaluará más rápido porque hay menos direccionamiento indirecto (más información al respecto: el costo de los módulos pequeños ). La contrapartida es que este comportamiento se basa en la semántica del módulo ES2015 y significa que algunas de las funciones avanzadas del paquete web son mucho más difíciles de implementar (por ejemplo, Rollup no admite la división de código, ¡al menos no todavía!).
En resumen, el paquete web generalmente se adapta mejor a las aplicaciones, y el resumen generalmente se adapta mejor a las bibliotecas.
He reunido una pequeña esencia que ilustra las diferencias . También puede tener una idea de la salida de Rollup jugando con el REPL de Rollup .