捆绑VS。在webpack4中分块

Question

我正在学习webpack。但这使我对Bundle和Block感到困惑。我已经对这两个概念做了一些搜索。但是仍然不清楚。我自己做了一些测试：

entry: {
  app: './src/app.js',
  people: './src/people.js'
}

plugins:[
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: "[name].css"
    })
        // new WebpackBundleAnalyzer()
    ]

构建后：

我的想法是：这四行是块，那么束是什么？

Answer 1

就Webpack而言，捆绑包只是一个生成的模块，它是通过构建一个依赖关系图而生成的，该依赖关系图映射了项目所需的每个模块。在后台，Webpack删除了未使用的代码，检测循环依赖关系，最小化代码等。最后，您将获得一个现成的模块，该模块可以包含在页面中。

documentation完美地突出显示了差异：

捆绑包：

由许多不同的模块产生，捆绑包含已经经历过的源文件的最终版本加载和编译过程。

Chunk：

此Webpack专用术语在内部用于管理捆绑过程。包由大块组成，其中有几种类型（例如，条目和子级）。通常，直接块与输出束相对应，但是有一些不会产生一对一关系的配置。

[当您的应用程序很大时，将大捆绑分成多个块并懒惰地加载它们可能很有意义，通常来说，它可以大大减少加载时间。

有一个很好的模块LimitChunkCountPlugin，可以帮助您检测太小的块并将其合并以减少HTTP开销。