reactjs - node - rollup vs webpack
¿Qué es el paquete plano y por qué Rollup es mejor en esto que Webpack? (1)
Recientemente he estado analizando el rollup 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 las mejores optimizaciones en torno a la agrupación plana (por ejemplo, la elevación). 1/2
Sin embargo, Webpack 2 puede ser mejor para usted si combina 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 de los treeshaking para ayudar a reducir el tamaño del paquete, pero Webpack también tiene una forma de hacerlo . Quizás simplemente no entiendo el concepto por completo.
Tenga en cuenta que esta NO es una pregunta de comparación sobre Rollup vs Webpack. Para las personas interesadas en eso, hay un cuadro comparativo para eso de Webpack . ¿Esto es principalmente preguntar qué es la agrupación plana? ¿Y qué hace Rollup internamente para lograr esto?
Editar: Rollup admite la división de código - lea el artículo
Editar: Webpack ahora admite la elevación del alcance en algunas situaciones: lea la publicación del blog aquí
Probablemente todos tenemos diferentes definiciones para estas cosas, pero creo que el paquete plano 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 forma predeterminada, en lugar de que su aplicación sea responsable de agrupar los módulos fuente de React (aunque siempre había un paquete UMD preconstruido de React disponible , construido 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 webpack 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 funciones avanzadas como la división de código y la carga a pedido, y el reemplazo de módulos activos (HMR).
Rollup adopta un enfoque diferente: pone todo su código al mismo nivel (reescribiendo identificadores según sea necesario para evitar conflictos entre nombres de variables, etc.). Esto a menudo se conoce como '' elevación del alcance ''. Debido a esto, no hay sobrecarga por módulo ni sobrecarga de paquete. Se garantiza que su paquete será más pequeño y también se evaluará más rápido porque hay menos indirección (más información sobre eso: el costo de los módulos pequeños ). La desventaja es que este comportamiento se basa en la semántica del módulo ES2015, y significa que algunas de las características avanzadas de webpack son mucho más difíciles de implementar (por ejemplo, Rollup no admite la división de código, ¡al menos todavía no!).
En resumen, el paquete web generalmente se adapta mejor a las aplicaciones, y Rollup generalmente se adapta mejor a las bibliotecas.
He reunido una pequeña idea que ilustra las diferencias . También puede tener una idea de la salida de Rollup jugando con el Rollup REPL .