Qu'est-ce que la mise à plat et pourquoi le cumul est-il meilleur que Webpack?

Question

J'ai récemment été à la recherche dans cumulatif et de voir comment il diffère de Webpack et d'autres bundlers. Une chose que je suis tombé sur que c'est mieux pour les bibliothèques en raison de "plat " groupage". Ceci est basé sur un tweet et d' une récente PR pour Réagir à utiliser Cumulatif.

Dans mon expérience, Cumulatif est mieux à la construction de bibliothèques en raison de meilleures optimisations autour de télévision regroupement (par exemple, de levage). 1/2

Webpack 2 peut-être mieux pour vous si vous êtes le regroupement des applications avec le code de fractionnement, etc si. 2/2

Je ne suis pas entièrement sûr de comprendre ce que cela signifie. Ce n'plat regroupement? Je sais Cumulatif de la documentation mentionne treeshaking pour aider à réduire le bundle de la taille mais Webpack a aussi une façon de le faire. Peut-être que je ne comprends pas le concept entièrement.

Veuillez noter que ce n'est PAS une question de comparaison concernant Cumulatif vs Webpack. Pour les gens intéressés, il y a un tableau de comparaison pour que par Webpack. C'est principalement demandant ce plat groupée est? Et potentiellement de quoi Cumulatif de le faire en interne pour y parvenir?

Answer 1

Edit: Cumulatif prend en charge le code de fractionnement lire l'article

Edit: Webpack prend désormais en charge la portée de levage dans certaines situations - lire le billet de blog ici

Nous avons probablement tous ont des définitions différentes pour ce genre de choses, mais je pense plat regroupement signifie simplement "prendre de vos modules et de les transformer en un seul lot" - je.e, le 'plat' est redondante. La grosse différence de Réagir 16 est que vous allez consommer une premade bundle par défaut, plutôt que de votre application en cours de responsable de groupement de Réagir à la source des modules (s'il n'y avait toujours un préconstruit UMD faisceau de Réagir disponibles, construit avec Browserify).

Plutôt, la grande différence entre les deux est ce qui se passe au module de limites. La façon webpack œuvres, c'est qu'il encapsule chaque module dans une fonction, et crée un module qui implémente un chargeur et un module de cache. Au moment de l'exécution, chacune de ces fonctions du module est évalué à son tour pour remplir le module de cache. Cette architecture a beaucoup d'avantages: il permet de mettre en œuvre des fonctionnalités avancées comme le code de fractionnement et de chargement à la demande, et le remplacement de module à chaud (HMR).

Cumulatif prend une approche différente, il met tout le code au même niveau (réécriture des identificateurs comme nécessaire pour éviter les conflits entre les noms de variables, etc). Ceci est souvent désigné comme"la portée de levage'. À cause de cela, il n'y a pas de module par module les frais généraux, et non par des faisceaux de frais généraux. Votre bundle est garanti d'être plus petit, et aussi d'évaluer plus rapidement car il y a moins d'indirection (plus d'informations sur - Le coût de petits modules). Le compromis est que ce comportement s'appuie sur ES2015 module sémantique, et cela signifie que certains de webpack fonctionnalités avancées sont beaucoup plus difficiles à mettre en œuvre (par exemple Cumulatif ne prend pas en charge le code de fractionnement, du moins pas encore!).

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

J'ai mis en place un petit résumé illustrant les différences. Vous pouvez également obtenir une sensation pour Cumulatif de sortie par bricoler avec le correctif Cumulatif REPL.