当 webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容...本步骤直到所有入口依赖的文件都经过了本步骤的处理。 完成模块编译：上一步递归处理所有能触达到的模块后，得到了每个模块被翻译后的内容以及它们之间依赖关系图。...构建阶段从entry开始递归解析资源与资源的依赖，在compilation对象内逐步构建出module集合以及module之间的依赖关系。...（三）生成阶段 输出资源(seal)：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。...中剥离出来独立为一个多entry间可共享的 runtime chunk。
Chunk 的编排规则非常复杂，涉及 entry、optimization 等诸多配置项，我打算分成两篇文章分别讲解基本分包规则、SplitChunksPlugin 分包优化规则，本文将集中在第一部分，...(require/import) 逐步构建出模块依赖关系图(ModuleDependencyGraph)，依赖关系图表达了模块与模块之间互相引用的先后次序，基于这种次序 webpack 就可以推断出模块运行之前需要先执行那些依赖模块...，也就可以进一步推断出那些模块应该打包在一起，那些模块可以延后加载(异步执行)，关于模块依赖图的更多信息，可以参考我另一篇文章 《有点难的 webpack 知识点：Dependency Graph 深度解析.../src/home", runtime: "solid-runtime" }, } }; 入口 index、home 共享相同的 runtime ，最终生成三个 chunk，分别为： 同时生成三个文件...5 引入的 ChunkGraph 解决了什么问题 Chunk、ChunkGroup、ChunkGraph 分别实现什么能力，互相之间如何协作，为什么要做这样的拆分 SplitChunksPlugin
Chunk 的编排规则非常复杂，涉及 entry、optimization 等诸多配置项，我打算分成两篇文章分别讲解基本分包规则、SplitChunksPlugin 分包优化规则，本文将集中在第一部分，...在构建(make) 阶段，webpack 从 entry 出发根据模块间的引用关系(require/import) 逐步构建出模块依赖关系图(ModuleDependencyGraph)，依赖关系图表达了模块与模块之间互相引用的先后次序...两者间存在单向依赖关系，在 webpack 中称引用者为 parent、被引用者为 child，分别存放在 ChunkGroup..../src/home", runtime: "solid-runtime" }, } }; 入口 index、home 共享相同的 runtime ，最终生成三个 chunk，分别为： ?...之间简单的父子关系链实现的，很难推断出提取出的第三个包应该作为 entry 的父 chunk 还是子 chunk，CommonChunkPlugin 统一处理为父 chunk，某些情况下反而对性能造成了不小的负面影响
如果你能把那些依赖库拆分到完全分离的文件中，即使业务逻辑发生了更改，访问者也不需要再次下载依赖库，直接使用之前的缓存就可以了。...它仅会随着文件内容的改变而改变。因此，浏览器就可以利用这一点来缓存它。如果打包输出的文件名变了，浏览器就知道自己需要重新下载它。...如果一个模块在不止一个chunk中被使用，那么利用代码分离，该模块就可以在它们之间很好地被共享。这是Webpack的默认行为。...我之前说过，为共享的库创建分离的文件是Webpack的一个默认行为，但这只涉及异步的chunk，即意味着只作用于我们异步引入的那些文件。我们会在介绍懒加载的时候讨论这个话题。...还有其他的配置供你使用，可查看SplitChunksPlugin文档。 总结 即使你只有一个入口（常发生于大多数单页应用中），把你的依赖放入一个独立的文件依然是个好主意。
webpack4提供了零配置方案，默认入口属性为./src，默认输出路径为....SplitChunksPlugin 与CommonsChunkPlugin的父子关系思路不同的是，SplitChunksPlugin引入了chunkGroup的概念，在入口chunk和异步chunk中发现被重复使用的模块...webpack4配置文件的变化点 如何配置webpack4下的配置文件，需要大致了解webapck4的配置项的改动点。...4.修改webpack.prod.conf.js 添加mode属性，并设置为production模式；然后注释掉 webpack4生产模式已经内置的插件，如CommonsChunkPlugin、uglifyjs-webpack-plugin...webpack2相对于webpack最大的改进就是支持ES Module，可以直接分析ES Module之间的依赖关系，而webpack1必须将ES Module转换成CommonJS模块之后，才能使用
打包为 vendors 单独打包使用频率较高的文件 SplitChunksPlugin 还提供配置组概念 optimization.splitChunks.cacheGroup，用于为不同类型的资源设置更有针对性的配置信息...类似，但只对 entry 配置的入口模块生效 enforceSizeThreshold：超过这个尺寸的 Chunk 会被强制分包，忽略上述其它 size 限制 那么，结合前面介绍的两种规则，SplitChunksPlugin...配置项则分包成功，commont 会被分离为单独的 Chunk，否则会被合并入原来的 3 个 Chunk。...cacheGroups 配置项用于为不同文件组设置不同的规则，例如： module.exports = { //......但只对 entry 配置的入口模块生效 enforceSizeThreshold：超过这个尺寸的 Chunk 会被强制分包，忽略上述其它 size 限制 cacheGroups：用于设置缓存组规则，为不同类型的资源设置更有针对性的分包策略
代码自动抽取 SplitChunksPlugin插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。...下面我们来看一下每一项的含义。...我们可以修改该配置项如下(这里对 cacheGroups 做了简单的修改，是为了方便后续的比较，大家简单理解为，node_modules 的模块，会放在 verdors 下，其他的会放在 default...image.png 3.2.2 splitChunks.minSize 生成块的最小大小(以字节为单位)。...3.2.7 splitChunks.maxInitialRequests 一个入口点的最大并行请求数。
我们需要动态导入它，这将创建一个包含此路由的新bundle作为入口点： ? 知道了这一点，让我们看看我们的捆绑和路由如何与动态导入一样： ?...通过此设置，webpack将创建三个包： app.js - 我们的主要包含应用程序入口点（main.js）和每个路由所需的库/组件 home.js - home页面bundle，只有在输入/路径时才会下载...它仍然比下载大量的冗余代码更好，但是如果我们已经有了这种依赖，那么重用它就没有意义了，对吧？ 这是webpack splitChunksPlugin可以帮助我们的地方。...只需将这几行添加到webpack配置中，我们就会将公共依赖项分组到一个单独的包中，以便共享它们。再说的清楚一些，几个路由页面共享的依赖，会单独抽取出来打包，而其他页面不会下载这个共享包。...整个应用有一个全局共享的vendor bundle。 ? 在chunks属性中，我们只是告诉webpack应该优化哪些代码块。您可能已经猜到了，将此属性设置为all，这意味着它应该优化所有代码块。
在阅读之前，本文将从以下几个点去探讨webpack的打包优化 1、webpack如何做treeShaking 2、webpack的gizp压缩 3、css如何做treeShaking, 4、入口依赖文件拆包...就没有了 在官方中有这么一段话使用 mode 为 "production" 的配置项以启用更多优化项，包括压缩代码与 tree shaking。...css就已经被删除了 分包 主要是减少入口依赖文件包的体积，如果不进行拆包，那么我们根据entry的文件打包就很大。...runtimeChunk 主要减少依赖入口文件打包体积，当我们设置optimization.runtimeChunk时，运行时依赖的代码会独立打包成一个runtime.xxx.js ......官方提供的这个插件 3、css如何做treeShaking, 主要是利用PurgeCSSPlugin这个插件，会将没有引用css删除 4、入口依赖文件拆包 第一种是在入口文件entry中分包处理，将依赖的第三方库独立打包成一个公用的
前言 公司的前端项目基本都是用Webpack来做工程化的，而Webpack虽然只是一个工具，但内部涉及到非常多的知识，之前一直靠CV来解决问题，之知其然不知其所以然，希望这次能整理一下相关的知识点。...webpack中有几个概念需要记住 entry(入口) 入口起点(entry point)即是webpack通过该起点找到本次项目所直接或间接依赖的资源（模块、库等），并对其进行处理，最后输出到bundle...SplitChunksPlugin webpack4的代码分割插件。...配置项 single: 所有入口共享一个生成的runtimeChunk true/mutiple: 每个入口生成一个单独的runtimeChunk 模块标识符 有时候我们只是添加了个文件print.js...通过各个 es标准 feature 在不同浏览器以及 node 版本的支持情况，再去维护一个 feature 跟 plugins 之间的映射关系，最终确定需要的 plugins。
entry 对应的 dependence 创建 module 对象，调用loader 将模块转译为标准 JS 内容，调用 JS 解释器将内容转换为 AST 对象，从中找出该模块依赖的模块，再 递归 本步骤直到所有入口依赖的文件都经过了本步骤的处理...完成模块编译：上一步递归处理所有能触达到的模块后，得到了每个模块被翻译后的内容以及它们之间的 依赖关系图 生成阶段： 输出资源(seal)：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk...构建阶段从 entry 开始递归解析资源与资源的依赖，在 compilation 对象内逐步构建出 module 集合以及 module 之间的依赖关系，核心流程： ?...其中 index.js 为 entry 文件，依赖于 a/b 文件；a 依赖于 c/d 文件。...到这里解析完所有模块后，发现没有更多新的依赖，就可以继续推进，进入下一步。 总结 回顾章节开始时提到的问题： Webpack 编译过程会将源码解析为 AST 吗？
webpack会在用户提供的配置的基础上，补充其他未配置的选项并设置默认值，部分默认值可能会区分环境，比如会根据mode的差异设置不同的优化策略（如压缩），又或者根据target即构建目标平台的不同设置相应平台合理的默认值...因此demo中设置mode为none，可以在调试过程中避过很多优化细节更专注的分析主流程。...比如SplitChunksPlugin。.../src/simple/main.js" } 逻辑分析 _preparedEntrypoints用来保存入口模块的信息：名称和构建后的模块实例（如NormalModule实例） 该方法的主要作用是当前依赖关联的模块构建完成后保存该模块实例到...两种理解的区别在于起点是依赖还是模块。 总结 从命令行到构建入口文件webpack.js到Compiler.js和Compilation.js，三个核心类确定了整个构建的主要框架。
本期进一步深入，分析 SplitChunksPlugin 源码，搞清楚 webpack 是怎么和 SplitChunksPlugin 配合，完成打包优化的。...SplitChunksPlugin 的三步走战略 Webpack 插件统一以 apply 方法为入口，然后注册优化事件，插件逻辑都在 SplitChunksPlugin.js 文件中： apply(compiler...\tchunks => { \t\t\t\t// 三步走，完成代码分割优化 \t\t\t} \t\t) \t} } 在整个编译周期中，compilation 会在生成 chunkGraph（包含代码块依赖关系的图结构...结构，每一项对应一个分割出来的缓存组，键名为根据name属性生成的key值，键值为该key值对应的modules、chunks和cacheGroup信息对象 const chunksInfoMap =...排队检查阶段 上一阶段生成了缓存组信息 chunksInfoMap，本阶段按照用户的 cacheGroup 配置，一项一项检查 chunksInfoMap 中各个缓存组是否符合规则，去除不符合的，留下符合的加入
有三种常用的代码分离方法：入口点：使用entry配置手动分割代码。这种方法存在一些缺陷如果入口 chunks 之间包含重复的模块，那些重复模块都会被引入到各个 bundle 中。...将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。...简单来讲，假如 minChunks 设置为 n，那么某个 module 想要被拆分出去，那么它的共享次数（或者说并行请求次数必须 >= n）:minChunks设置为n假设有m个入口点，这m个入口点都直接引入了某个模块...module（通过import或require直接或间接地引入了模块），也就是共享次数为m当m至少等于n时，module才会被单独拆分成一个bundle但是，有个特例minChunks设置成1有一个入口点...最后，还有一个点需要注意，minChunks 不能设为 0，其值为 >= 1 的正整数，不然为报错。
值为 false 时，适合生产模式使用，webpack 会避免对 chunk 进行不必要的命名，以减小打包体积，除了入口 chunk 外，其他 chunk 的名称都由 id 决定，所以最终看到的打包结果是一排数字命名的...为 3，入口分包数量达到了上限，很可能是上限太小导致无法继续分包，所以我们修改 commons 的规则，将 maxInitialRequests 增加到 5： commons: { chunks:....js 被单独打包为 commonspageBpageC，同时 pageB 入口变为了四个包：commonspageApageBpageC.js，vendor.js commonspageB~pageC.js...希望读完本文，大家面对再复杂的项目都能有优化入手点。 当然，优化本身是一件拆东补西的事，比如提取出一个公共 chunk，打包产出的文件就会多一个，也必然会增加一个网络请求。...没多少人吧，趁机立个flag：点赞超50，一周内直接SplitChunksPlugin源码撕出来。
） entry下的dependOn：当前入口所依赖的入口。...它们必须在该入口被加载前被加载。 SplitChunksPlugin，最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。...CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。...当提供一个字符串，有效值为 all，async 和 initial。设置为 all 可能特别强大，因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。...函数参数为一个对象，所有传入的参数为该对象的属性。 6.构建时的JS压缩 TerserWebpackPlugin ，该插件使用 terser 来压缩 JavaScript。
最近在系统整理知识点，现将Webpack的一些重要知识点罗列出来，方便快速查阅。...引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如：UglifyJSPlugin) 将文件标记为无副作用(side-effect-free) 这种方式是通过package.json...若想打包过后的文件名不带vendors~前缀，可以修改webpack.common.js中optimization配置项： .... optimization: { splitChunks: {...应当在生成入口chunk时，尽量减少入口chunk的体积，以提高性能。 Production 不要为了非常小的性能增益，牺牲了你应用程序的质量！！...cache-loader: 缓存可以在多个编译之间共享。
核心概念 entry：入口。webpack是基于模块的，使用webpack首先需要指定模块解析入口(entry)，webpack从入口开始根据模块间依赖关系递归解析和处理所有资源文件。...事件api供插件调用）； AST & 依赖图：从入口文件（entry）出发，调用AST引擎(acorn)生成抽象语法树AST，根据AST构建模块的所有依赖； 递归编译模块：调用所有配置的 Loader...对模块进行编译； 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会； 输出完成：...使用上是有限制的，例如无法使用自定义 loader api，无法获取webpack 配置项 5....entry） 使用 SplitChunksPlugin 进行重复数据删除和提取 使用 Dynamic Import 指定模块拆分，并且可以结合 preload、prefetch做更多用户体验上的优化
⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 分离代码文件 在此之前，首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别；简单来说在 entry...定义的入口文件走的就是 filename 配置项，在入口文件内部引入的通常情况下是 chunk，走 chunkFilename 的配置 所以很多时候分离代码文件就是将不同的 chunk 分离开来，生产环境中有利于浏览器缓存...这样的文件中 配置 filename 则会打包成 [filename] 命名的文件中 runtimeChunk 的作用 这个 runtimeChunk 实际上就是链接业务逻辑和第三方类库之间的关系的 manifest...style 标签，还需要在 sideEffects 中加入 *.vue 的配置项。...，想把多个入口引入的样式文件全部打包到一个地方，那么可以使用 optimization 配置项的 splitChunks，所以这个配置项不仅仅只作用于 js，css 也是可以的： optimization
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
