皮皮网

1.webpack的chunk生成逻辑
2.webpack性能优化(2)：splitChunks用法详解
3.SplitChunksPlugin 插件快速入门
4.SplitChunk 与DLL 、CommonsChunk
5.Webpack 的 Chunk，想怎么分就怎么分
6.从0彻底梳理，2024年webpack5最佳实践（附demo示例）

webpack的chunk生成逻辑

       Webpack的chunk生成机制是在优化前端资源加载性能时的重要手段。在webpack@4环境中，通过optimization.splitChunks配置实现模块拆分和按需加载。这个配置涉及SplitChunksPlugins插件，香烟详情源码其默认行为是async，但可以调整为initial以优化bundle加载。

       在splitChunks配置中，你可以指定chunk的生成策略，如all、async、initial或自定义函数。将它改为initial后，bundle会被视为立即加载的chunk进行优化，可能会生成名为vendors~xxx.js的文件，其中包含node_modules中的模块。

       minSize和maxSize配置控制新生成chunk的文件大小，只有当尺寸在限制范围内，chunk才会被创建。cacheGroups则是关键，它定义了module如何合并成chunk，包括测试规则（test）、俄罗斯源码端游源码优先级、chunk名称生成规则（name）等。例如，test可以匹配特定路径，如node_modules，将相关模块放入vendors chunk。

       minChunks规则决定当一个chunk引用的module数量达到阈值时，才会生成新的chunk。splitChunks的配置会在cacheGroup中应用，理解这些设置有助于你更有效地管理模块拆分。

       总的来说，理解这些配置有助于你精细化管理webpack的chunk生成，从而提升网站的加载速度和用户体验。通过调整和优化这些参数，你可以更好地控制资源加载，实现前端性能的优化。

webpack性能优化(2)：splitChunks用法详解

       Webpack性能优化(2)：splitChunks详解

       在深入研究webpack性能优化时，splitChunks是关键工具。它允许我们有效地拆分代码，实现按需加载和资源控制，从而显著提升加载速度。在默认情况下，红角鸮源码60专精源码vendor.js过大时，我们需要利用splitChunks进行拆包优化。

       首先，通过Chrome的Instrument converge功能，我们可以分析js和css的资源使用情况。优化输出与分包，以往的CommonsChunkPlugin已整合到optimization项目中，无需单独配置。

       理解代码分离（Code Splitting）的概念是基础，它将代码分成不同的bundle，实现更高效的加载。有三种常见的代码分离策略，如splitChunks的配置，包括maxAnyscRequests、maxInitialRequests和minChunks等，它们在限制拆分数量和最小共享次数上起着重要作用。

       splitChunks默认配置即使无明确设置也会生效，但为了最佳效果，我们需要了解并调整相关配置，如minChunks的number和Infinity属性，以及minSize和maxSize用于设置拆分包的大小限制。同时，html源码和php源码下载cacheGroups是核心配置，用于定制拆分规则。

       runtimeChunk的配置有助于分离运行时代码，确保缓存的高效利用，提升用户体验。最后，externals配置有助于启用CDN以优化缓存和打包分析，路由懒加载分组则有助于文件大小和数量的减少。

       性能监控显示，适当的splitChunks配置可以避免entrypoint过大，影响web性能。通过参考文章如webpack4 之 splitChunks.minChunks和理解webpack4.splitChunks，深入学习和调整这些设置，以达到最佳性能优化效果。

SplitChunksPlugin 插件快速入门

       SplitChunksPlugin插件是webpack v4版本中用于代码分割的内置插件，无需额外引入。相比之前的CommonsChunkPlugin，SplitChunksPlugin功能更为强大，不仅可以提取公共的文件和库，还能提取按需加载的文件。官方推荐开发者将不需要立刻使用的代码异步引入以优化网页速度。默认配置包括对动态引入的源码网站的源码哪来的文件进行代码分割，用户可根据需求调整splitChunks参数来控制代码分割策略。splitChunks.chunks参数决定分割策略，可选值有'async'（默认）、'initial'和'all'。minSize参数设置分割最小文件大小，maxSize参数则设置单个模块的最大大小。minChunks参数控制引用次数以决定是否分割模块。maxAsyncRequests和maxInitialRequests分别限制异步加载的chunk数量和入口文件中并行加载的异步请求数量。通过自动名规则，chunk名由vender和原始名连接，可指定自动生成或使用自定义名称。cacheGroups参数用于创建缓存组，优化代码分割策略，包括定义测试规则、优先级、复用已有chunk、自定义文件名和强制生成chunk等。理解并合理配置SplitChunksPlugin可以显著提高页面加载速度，减少资源请求，优化用户体验。希望本文能帮助你更好地理解SplitChunksPlugin插件的用法，并在项目中有效应用。如有任何问题，欢迎在评论区提问，我将尽力提供帮助。感谢阅读！

SplitChunk 与DLL 、CommonsChunk

        在Webpack4后，官方就不再推荐使用了CommonsChunkPlugin，该为推荐使用SplitChunksPlugin。

        在CommonsChunkPlugin中是通过文件中父子关系来进行关联的，这会造成一个问题：

        存在当前文件中部分模块不是必须的而提前加载了。

        CommonsChunkPlugin 存在以下问题：

        而在SplitChunksPlugin中，引入了ChunkGroup概念，文件分组，在配置中属性为cacheGroups 。

        SplitChunksPlugin 也提供了更多特性

        其中cacheGroups中可以定义多个，进行更多细则的打包优化。

        DLLPlugin这个插件是在一个额外独立的 webpack 设置中创建一个只有 dll 的 bundle——即在将所有第三方依赖包打包到 bundle的dll文件中，会生成 manifest.json 文件，

        manifest.json 的作用是用来让 DllReferencePlugin 映射到相关的依赖上去。

        DLLPlugin 它则是提前将公共的包构建出来，使得在 build 时过滤掉这些构建过的包，使得在正是构建时的速度缩短。所以其相对来说打包速度会更快。

        在Webpack4中 有hardsourcewebpackplugin,配置更简单，效率比dll效率更高。

        webpack 插件 文档

        webpack 文件分离思想

        webpack 4: Code Splitting, chunk graph and the splitChunks optimization

        译文：webpack 4: Code Splitting, chunk graph and the splitChunks optimization

Webpack 的 Chunk，想怎么分就怎么分

       Webpack 是一个模块打包工具，将模块打包后生成可用于浏览器的代码。它的核心原理涉及模块解析、依赖图构建以及 Chunk 划分。Webpack 通过一系列步骤将模块打包成可执行的代码，包括构建模块依赖图、进行基础的 Chunk 划分、进一步优化划分以及最终生成代码。

       Webpack 的模块划分主要发生在构建依赖图和优化阶段。它会根据模块的特性（如入口模块、异步引入模块）进行基础划分，并在此基础上优化，以实现更高效、更合理的代码分割。通过自定义插件，用户可以进一步控制这个过程，实现更符合特定需求的 Chunk 划分。

       在理解了Webpack的原理和流程后，我们可以编写插件来对 Chunk进行自定义处理。插件注册在编译流程中的特定钩子，如`optimizeChunks`钩子，该钩子用于对 Chunk 进行优化操作。通过自定义逻辑，我们可以实现对 Chunk 的合并、拆分等操作，从而实现更加灵活的代码分割策略。

       例如，可以编写插件来合并具有共同依赖的异步引入模块，减少文件数量，提高加载速度。此外，还可以根据 Chunk 大小进行优化，实现更精细的代码分割。通过这种方式，我们可以根据实际需求和性能目标，自定义代码分割策略，实现“想怎么分就怎么分”的目标。

       Webpack 内置了如`SplitChunksPlugin`等插件来实现基本的 Chunk 划分功能，但为了更精细地控制和优化，编写自定义插件是理想的选择。通过深入了解Webpack的内部机制和插件机制，我们可以编写出高度定制化的代码分割策略，以满足各种应用的需求。

从0彻底梳理，年webpack5最佳实践（附demo示例）

       前言

       webpack被誉为模块打包机，用于前端代码构建，它在过去的十年中弥补了传统前端领域的不足，成为现代前端发展的基石。webpack是前端构建工具链的一部分，其构建功能已经超越了传统前端技术的范畴，成为一个独立的技术领域。因此，理解webpack需要一定的相关知识基础，如服务端操作系统和nodejs或其他服务端语言。本文将介绍webpack5的最新最佳实践，并通过一个React项目示例进行说明。

       学webpack的必要性

       作为现代前端工具链的核心，webpack功能丰富、灵活且开放。尽管webpack5的集成已非常强大，但构建产物直接用于前端成果交付，因此了解webpack的工作原理对于技术负责人来说至关重要。技术负责人需要根据业务特点自定义构建流程，以便更好地适应团队规范，并便于调试构建过程中出现的问题。

       第一步：npm run 什么？

       搭建webpack的第一步是了解npm run命令的执行逻辑。由于webpack提供了多种执行方式，建议在package.json中配置node.js执行入口，区分生产环境和开发环境，以简化执行逻辑。

       构建流程

       创建开发环境（development）和生产环境（production）的构建目标配置文件，如webpack.dev.js和webpack.prod.js。同时，创建公共配置文件webpack.common.js，使用webpack-merge合并通用配置。在build目录放置构建相关代码，在src目录放置业务代码。

       执行入口

       执行npm run start/build时，通过环境变量NODE_ENV确定执行开发环境构建还是生产环境构建。使用webpack方法执行构建，并通过webpack-dev-server启动开发服务器，实现项目构建、自动渲染和热更新。

       基本配置

       配置入口和出口、Loader、Plugin等。Loader配置方面，React项目使用babel-loader、css-loader和file-loader。Plugin配置方面，使用html-webpack-plugin编译HTML，MiniCssExtractPlugin提取CSS到单独文件，SplitChunksPlugin进行代码拆分，webpack.HotModuleReplacementPlugin实现热更新等。

       总结

       本文通过一个React项目示例，介绍了webpack5的最佳实践。通过梳理构建流程、配置Loader和Plugin等，可以构建一个高效、灵活的前端项目。