Qu'est-ce que le regroupement à plat et pourquoi Rollup est-il meilleur que Webpack?

Question

J'ai récemment examiné rollup et vu comment il diffère de Webpack et d'autres bundlers. Une chose que je suis tombé sur est que c'est mieux pour les bibliothèques en raison de "bundling plat". Ceci est basé sur un tweet et à partir de a recent PR for React to utilize Rollup. Dans mon expérience, Rollup est meilleur à construire des bibliothèques en raison de meilleures optimisations autour de la mise en faisceau à plat (par exemple de levage). 1/2

Webpack 2 peut être meilleur pour vous si vous regroupez des applications avec le partage de code, etc. Je ne suis pas entièrement sûr de comprendre ce que cela veut dire. À quoi renvoie le groupage à plat? Je sais que la documentation de Rollup mentionne treeshaking pour aider à réduire la taille du paquet, mais Webpack also has a way of doing this. Peut-être que je ne comprends tout simplement pas le concept.

S'il vous plaît noter que ce n'est pas une question de comparaison concernant Rollup vs Webpack. Pour les personnes intéressées, il y a un comparison chart for that by Webpack. Cela demande principalement ce qu'est le bundling plat? Et potentiellement que fait Rollup en interne pour y parvenir?

Answer 1

Edit: Webpack supporte maintenant la portée de levage dans certaines situations - read the blog post here

Nous avons probablement tous ont des définitions différentes pour ce genre de choses, mais je pense que bottelage plat signifie simplement « prendre vos modules et les transformer en un seul faisceau '- c'est-à-dire que le' plat 'est redondant. La grande différence dans React 16 est que vous allez consommer un bundle préfabriqué par défaut, plutôt que votre application étant responsable du regroupement des modules source de React (bien qu'il y ait toujours un prebuilt UMD bundle of React available, construit avec Browserify). Plutôt, la grande différence entre les deux est ce qui se passe aux limites de module. Le fonctionnement de webpack est qu'il encapsule chaque module dans une fonction et crée un ensemble qui implémente un chargeur et un cache de module. Lors de l'exécution, chacune de ces fonctions de module est évaluée à son tour pour remplir le cache du module. Cette architecture présente de nombreux avantages - elle permet d'implémenter des fonctionnalités avancées telles que le partage de code et le chargement à la demande, ainsi que le remplacement de modules à chaud (HMR). Le rollup adopte une approche différente - il met tout votre code au même niveau (en réécrivant les identifiants nécessaires pour éviter les conflits entre les noms de variables, etc.). Ceci est souvent appelé «télescopage». A cause de cela, il n'y a pas de surcharge par module, et pas de surcharge par paquet. Votre paquet est garanti pour être plus petit, et évaluera également plus rapidement parce qu'il y a moins d'indirection (plus d'informations à ce sujet - The cost of small modules). Le compromis est que ce comportement repose sur la sémantique des modules ES2015, ce qui signifie que certaines fonctionnalités avancées de webpack sont beaucoup plus difficiles à implémenter (par exemple, Rollup ne prend pas en charge le fractionnement de code, du moins pas encore!).

En bref, webpack est généralement un meilleur ajustement pour les applications et Rollup est généralement un meilleur ajustement pour les bibliothèques.

J'ai mis en place un small gist illustrating the differences. Vous pouvez également avoir une idée de la sortie de Rollup par tinkering with the Rollup REPL.