Que sont le module, le chunk et le bundle dans webpack ?

Question

Je ne comprends pas très bien des concepts comme module, chunk et bundle.

{
  entry: {
    foo: ['webpack/hot/only-dev-server.js', './src/foo.js'],
    bar: ['./src/bar.js']
  },
  output: {
    path: './dist',
    filename: '[name].js'
  }
}

Dans la configuration ci-dessus, sont only-dev-server.js y foo.js les deux morceaux ? Est-ce que foo y bar les deux paquets ? Est-ce que foo.js y bar.js les deux modules ?

Answer 1

Après avoir passé une journée à creuser cette question, j'ai voulu fournir ce que je crois être une réponse légèrement plus précise. L'équipe de webpack a publié un utile (et délicat à remarquer) glossaire .

Je crois que la confusion au sujet des chunks et des bundles est que les termes peuvent se référer à la même chose, mais doivent être utilisés à différents moments dans le processus de webpack. processus .

définitions du glossaire webpack

Module : Des morceaux discrets de fonctionnalité qui offrent une surface plus petite qu'un programme complet. Les modules bien écrits fournissent des abstractions solides et des limites d'encapsulation qui constituent une conception cohérente et un objectif clair.

Chunk : Ce terme spécifique au webpack est utilisé en interne pour gérer l'empaquetage. processus . Les bundles sont composés de chunks, dont il existe plusieurs types (par exemple, entry et child). En général, les chunks correspondent directement aux bundles de sortie ; cependant, certaines configurations ne permettent pas d'établir une relation biunivoque.

Offre groupée : Produites à partir d'un certain nombre de modules distincts, les liasses contiennent la versions finales de fichiers sources qui ont déjà subi le processus de chargement et de compilation.

(c'est moi qui souligne)

Interprétation

Je résume la différence comme suit : un chunk est un groupe de modules au sein du processus webpack un faisceau est un Morceau ou ensemble de morceaux émis .

La distinction est utile lorsqu'on parle de processus webpack au fur et à mesure qu'ils se produisent . Lorsque les modules sont regroupés, ils peuvent changer de manière significative (en particulier pendant le traitement des plugins), il n'est donc pas exact de les appeler des bundles à ce stade, les chunks peuvent même ne pas être émis en tant que bundles dans la sortie finale ! Une fois que webpack est terminé, il est utile d'avoir un terme pour se référer à tous les fichiers finaux émis (bundles).

Votre exemple

Donc, pour votre exemple

{
  entry: {
    foo: ["webpack/hot/only-dev-server.js","./src/foo.js"],
    bar: ["./src/bar.js"]
  },
  output: {
    path: "./dist",
    filename: "[name].js"
  }
}

• Modules : "webpack/hot/only-dev-server.js", "./src/foo.js", "./src/bar.js" ( + tout autre module dépendant de ces points d'entrée !).
• Chunks : foo, bar
• Liasses : foo, bar

Dans votre exemple, vos chunks et bundles ont une relation 1:1, mais ce n'est pas toujours le cas. Par exemple, si vous ajoutez des cartes sources, vous aurez une relation 1:2 entre un chunk et un bundle.

Ressources

• glossaire webpack
• webpack stats données documentation
• Numéro 970 - Concepts - Bundle vs Chunk

Answer 2

A paquet est un code connexe regroupé dans un seul fichier.

Si vous ne voulez pas que tout votre code soit placé dans un seul gros paquet, vous le diviserez en plusieurs paquets qui sont appelés morceaux dans la terminologie de webpack. Dans certains cas, vous définirez vous-même la façon dont votre code est divisé en morceaux (avec une balise entry qui pointe vers plusieurs fichiers et un modèle de fichier de sortie comme [name].[chunkhash].js ), dans d'autres cas webpack le fera pour vous (par exemple avec CommonsChunkPlugin ).

A module est un module JS (par exemple, un module CommonJS ou ES6). Parce qu'en interne, webpack ne traite que les modules, toutes les ressources non JS sont également enveloppées dans des modules. Donc si vous avez des .sass par exemple, vous import / require dans des fichiers JS pour qu'ils soient regroupés, mais si vous utilisez ExtractTextWebpackPlugin il produira un paquet CSS séparé pour ces fichiers.

Answer 3

Je cherchais des détails supplémentaires sur le fractionnement des paquets en petites parties et j'ai trouvé votre question de même que je suis allé très loin avec ce sujet et j'ai trouvé ceci dans un bon article que je vous recommande vraiment :

Un chunk est un code qui va se détacher du bundle principal, c'est-à-dire main.js, et former son propre fichier connu sous le nom de fichier chunk. Il existe deux types de chunks : sync et async. Les chunks sync sont chargés de manière synchrone avec main.js et vous verrez l'élément dans le code source. Les chunks asynchrones sont chargés à la demande (lazy loaded) et vous verrez une demande de réseau pour les fichiers chunks asynchrones dans l'outil de développement. Ces chunks sont envoyés par main.js en fonction de certaines conditions et nous devons le dire à Webpack. Ceci est fait par le plugin Webpack connu sous le nom de splitChunksPlugin.

Plus d'informations ici : https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312