Qu'est-ce que la mise à plat et pourquoi le rollup est-il meilleur que Webpack?
J'ai récemment étudié rollup et constaté en quoi il diffère de Webpack et d'autres bundlers. Une chose que j’ai trouvée c’est que c’est mieux pour les bibliothèques à cause du "bundle flat". Ceci est basé sur un Tweet et à partir de PR récent pour React pour utiliser le cumulatif .
D'après mon expérience, Rollup est meilleur pour la construction de bibliothèques en raison de meilleures optimisations autour de la mise en paquet à plat (par exemple, le levage). 1/2
Webpack 2 peut être préférable pour vous si vous regroupez des applications avec partage de code, etc. 2/2
Je ne suis pas tout à fait sûr de comprendre ce que cela signifie cependant. Qu'est-ce que le groupage à plat? Je sais que la documentation de Rollup mentionne treeshaking pour aider à réduire la taille du paquet, mais Webpack dispose également d'un moyen de le faire . Peut-être que je ne comprends pas tout à fait 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 existe un tableau de comparaison de Webpack . Ceci demande principalement ce qu'est le bundling à plat? Et potentiellement, que fait Rollup en interne pour y parvenir?
Edit: Le cumulatif prend en charge le fractionnement du code - lire l'article
Edit: Webpack prend désormais en charge le levage de la portée dans certaines situations - lisez le billet de blog ici
Nous avons probablement tous des définitions différentes pour ce type de produit, mais je pense que le bundle flat signifie simplement "prendre vos modules et les transformer en un seul bundle", c'est-à-dire que le "flat" est redondant. La grande différence entre React 16 est que vous utiliserez un bundle préfabriqué par défaut, au lieu que votre application soit chargée de regrouper les modules source de React (bien qu'il y ait toujours eu un MD pré-construit). ensemble de React disponible , construit avec Browserify).
La grande différence entre les deux est ce qui se passe aux limites du module. Le fonctionnement de Webpack consiste à encapsuler chaque module dans une fonction et à créer un ensemble qui implémente un chargeur et un cache de module. Au moment 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 fractionnement de code et le chargement à la demande, ainsi que le remplacement de modules à chaud (HMR).
Le rollup adopte une approche différente - il place tout votre code au même niveau (en réécrivant les identifiants si nécessaire pour éviter les conflits entre les noms de variables, etc.). C'est ce que l'on appelle souvent ' le levage de la portée '. À cause de cela, il n'y a pas de temps système par module, ni de temps système par paquet. Votre paquet est garanti d'être plus petit et sera également évalué plus rapidement car il y a moins d'indirection (plus d'informations à ce sujet - Le coût des petits modules ). Le problème, c'est que ce comportement repose sur la sémantique des modules d'ES2015 et signifie que certaines des fonctionnalités avancées de Webpack sont beaucoup plus difficiles à mettre en œuvre (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 petit Gist illustrant les différences . Vous pouvez également avoir une idée de la sortie de Rollup en bricoler avec le Rollup REPL .