http协议中chunk的应用场景

一、http协议中chunk的应用场景

1、减少 Http请求与优化用户体验之间的平衡是网站设计的关键。 Yahoo Web开发的14条军规中提到的“减少你的 Http请求”是一个重要的原则，但实际应用中需要考虑页面信息规模与 Http请求数的权衡。为了使用户更容易接受信息，我们需要加载 CSS、图片、js脚本等，这些内容丰富了页面，但同时增加了 Http请求数。

2、为了优化首次加载体验，我们可以利用浏览器缓存，把静态资源缓存下来，减少首次请求的 Http请求。但是，这种方法仅适用于重复请求相同的资源，对于首次加载，浏览器缓存无能为力。针对首次加载优化，我们可以通过将文章结构分解，先呈现文章标题、简介、索引等部分，以减少用户等待时间，这就是“分部加载”策略。

3、“分部加载”能够显著改善用户体验，然而，Ajax技术虽然可以实现这种加载方式，但它增加了大量的 Http请求次数，与“减少 Http请求”的原则相悖。为了解决这一问题，我们引入了 Http协议中的 Chunk编码技术。

4、Chunk编码允许服务器在生成 HTTP响应时实时调整消息大小，从而在响应中分段发送内容。浏览器接收到 Chunk编码响应后，可以在接收每个 Chunk段后立即渲染该段内容，实现“分部加载”的效果，无需等待全部内容加载完成。

5、通过在 PHP脚本中应用 Chunk编码技术，我们可以在响应文章请求时，逐段发送文章内容，用户可以立即看到文章的标题、简介、索引等部分，显著减少等待时间。这种方法利用了 Http协议的特性，既实现了“分部加载”，又避免了额外的 Http请求，是优化用户体验与减少请求数的理想解决方案。

6、Facebook等大型网站为了减少页面响应时间，采用了 Chunk编码技术的变体，如“BigPipe”技术。这种技术极大提高了页面加载速度，是 Http协议中 Chunk编码应用的一个成功案例。使用 Chunk编码技术，网站可以显著提高响应速度，为用户提供更快、更流畅的访问体验。

7、为了进一步了解 Chunk编码技术及其在网页加载优化中的应用，推荐深入阅读相关文章，如《flush让页面分块，逐步呈现》、《名站技术分析— facebook奇特的页面加载技术》、《Facebook创新之BigPipe：优化页面加载时间》、《BigPipe: Pipelining web pages for high performance》。这些资源将帮助您更深入地了解 Chunk技术在提高网页加载速度方面的潜力。

二、代码拆分-使用SplitChunks

1、探索代码优化的世界，最近开始接触项目优化工作，其中涉及三方组件的拆分。在未进行拆分前，可能存在两个场景：单一js文件过大，影响缓存效率；无法有效管理第三方库。利用`splitChunks`工具，可以将模块进行分割，并提取重复代码，解决上述问题。

2、概念区分- module、bundle、chunk

3、深入理解`splitChunks`之前，先梳理几个概念。module：模块，在webpack中，任何文件都可视为模块，需要配置loader将其转换为支持打包的文件。chunk：编译完成待输出时，webpack将module按特定规则组合成一个个chunk。bundle：webpack处理完chunk文件后，生成供浏览器运行的代码。

4、探析chunk的构成与bundle之间的关联。chunk有两种形式：初始化（initial）chunk，即入口起点的主chunk，包含入口起点及其依赖的所有模块；非初始化（non-initial）chunk，用于延迟加载，可能在使用动态导入或`SplitChunksPlugin`时出现。

5、假设目录结构如下：index.js, another-module.js, webpack.config.js, package.json添加script配置，运行webpack并使用ndb追踪代码执行。通过命令启动浏览器，点击播放按钮执行build命令，追踪chunk到bundle的流转。

6、从`Compilation`类的`seal`方法出发，首先搜集chunks，然后调用`createChunkAssets`方法生成source，为输出文件做准备；通过`compilation.emitAssets`方法记录资源信息到`compilation.assets`对象；一系列回调最终调用`onCompiled`方法，将assets信息写入输出目录，生成bundle文件。

7、将`index.js`中的lodash通过`import`方式导入，动态导入返回promise，通过`then`获取导入信息。修改`webpack.config.js`入口为单个`index.js`。源码追踪显示，初始化文件新增一个名为`index`的chunk，但在模块分析中识别到`import`方式，为`index.js`模块增加了`AsyncDependenciesBlock`标记，经过处理生成一个名为`null`的chunk。

8、总结：`chunk`是源代码中的抽象，封装定义如何将模块组写入文件，而`bundle`则是输出目录的文件。

9、在上述示例中，存在三方模块重复引用的问题。通过简单的`optimization.splitChunks`配置，实现了lodash的抽离，降低了单个入口文件的大小。总结使用心得，`splitChunks`主要用于代码优化，针对不同场景配置`chunks`选项，如`all`、`async`、`initial`以及自定义函数，以达到高效拆分效果。

10、比较`async`、`initial`、`all`的区别

11、在示例中增加`another.js`，静态导入lodash，对比`async`、`all`、`initial`的不同效果。默认情况下，`initial`影响HTML文件中的脚本标签，而`async`仅针对动态导入，`all`则考虑更多场景，适合存在复用模块的情况，但需权衡动态导入及其内部依赖的抽离。

12、在使用`splitChunks`基础上，通过`cacheGroups`实现更细粒度的代码拆分，进一步优化项目结构。

13、通过`splitChunks`配置，实现三方组件的高效管理与拆分，优化代码结构与加载效率。理解模块、bundle、chunk之间的关系，以及如何利用`splitChunks`与`cacheGroups`进行代码拆分与优化，是提升项目性能的关键步骤。

三、Webpack之SplitChunks插件用法详解

1、SplitChunks插件在Webpack中的功能在于提取代码，减少重复打包，优化大文件，合并零碎文件，提高前端性能。其核心作用是自动化提取公共代码，以减少加载时间，减少资源请求。

2、Webpack优化中提取公共代码是基础步骤。SplitChunks插件能自动完成这一过程，释放开发者的时间，专注于代码编写。通过配置SplitChunks插件，能实现对代码块的拆分与合并，从而优化打包结果。

3、配置SplitChunks插件涉及多个选项，如output.filename、output.chunkFilename和webpackChunkName，它们分别影响入口文件、非入口文件和块的命名。理解这些选项的使用能帮助开发者更好地管理打包生成的文件。

4、在实际项目中使用SplitChunks插件，开发者需首先了解其默认配置。通过安装webpack-bundle-analyzer插件并配置到vue.config.js中，开发者可实时查看打包分析结果，直观地优化配置。例如，通过修改name选项，开发者能自定义chunk-vendors.js文件名称，从而更好地管理打包结果。

5、入口文件的优化是关键，SplitChunks插件能自动识别并分离入口文件中的公共代码，避免重复打包，减少首屏加载时间。通过移除入口文件中暂时不使用的引入，如jsencrypt，可显著减少js文件大小，提高首屏加载速度。

6、非入口文件的优化同样重要。SplitChunks插件能识别并提取组件中的公共代码，如从node_modules加载的模块，将其合并到一个文件中，减少文件数量，优化加载性能。通过设置chunks选项，开发者能控制如何提取和合并这些模块，进一步优化打包结果。

7、SplitChunks插件提供了多种优化策略，包括externals、maxSize和按路径提取等，以满足不同项目的需求。利用这些策略，开发者能定制化优化方案，实现更高效的打包过程。

8、总之，SplitChunks插件是前端开发者提升项目性能的有力工具。通过合理配置和应用，开发者能有效控制和优化Webpack打包生成的js文件，实现资源的高效管理，提高用户体验。实践过程中，开发者需根据项目特性和性能需求，灵活应用SplitChunks插件的配置选项，以实现最佳的打包优化效果。