捆绑VS。 webpack4 中的块答案

【问题标题】：Bundle VS. Chunk in webpack4捆绑VS。 webpack4 中的块
【发布时间】：2019-12-10 06:30:47
【问题描述】：

我现在正在学习 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呢？

【问题讨论】：

标签： webpack bundle

【解决方案1】：

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

documentation 完美地突出了差异：

捆绑包：

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

块：

这个特定于 webpack 的术语在内部用于管理捆绑过程。捆绑包由块组成，其中有有几种类型（例如 entry 和 child）。通常，直接分块与输出包相对应，但是有一些不产生一对一关系的配置。

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

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

【讨论】：

啊！谢谢！我会检查这些:)