捆绑VS。 webpack4 中的块

Question

我现在正在学习webpack。但它让我对 Bundle 和 chunk 感到困惑。我已经对这两个概念进行了一些搜索。但还是不清楚。我自己做了一些测试：

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

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

构建之后：

我的想法是：这四行是chunk，那么bundle是什么？

Answer 1

就 Webpack 而言，bundle 只是生成的模块，它是通过构建映射项目所需的每个模块的依赖关系图而产生的。在引擎盖下，Webpack 删除未使用的代码、检测循环依赖项、最小化代码等。最后，您将获得一个可以包含到页面中的准备就绪的模块。

documentation 完美突出了差异：

捆绑包：

Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.

块：

This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don't yield a one-to-one relationship.

当你的应用程序很大时，将大包拆分成块并延迟加载它们可能很有意义，一般来说，它可以显着减少加载时间。

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

查看这些相关讨论 What are module, chunk and bundle in webpack? and https://github.com/webpack/webpack.js.org/issues/970

捆绑VS。 webpack4 中的块

Bundle VS. Chunk in webpack4

bundle

webpack