皮皮网

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）、lisk源码优先级、chunk名称生成规则（name）等。例如，test可以匹配特定路径，如node_modules，将相关模块放入vendors chunk。

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

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

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

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

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

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

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

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

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

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

SplitChunksPlugin 插件快速入门

       SplitChunksPlugin插件是webpack v4版本中用于代码分割的内置插件，无需额外引入。相比之前的CommonsChunkPlugin，SplitChunksPlugin功能更为强大，不仅可以提取公共的文件和库，还能提取按需加载的文件。官方推荐开发者将不需要立刻使用的代码异步引入以优化网页速度。默认配置包括对动态引入的libcoap源码文件进行代码分割，用户可根据需求调整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等，可以构建一个高效、灵活的前端项目。