- 综合排序
- 最热优先
- 最新优先
- 来自专栏Tecvan
Webpack 性能系列四：分包优化
optimization: { splitChunks: { // 设定引用次数超过 4 的模块才进行分包 minChunks: 3 }, }, } 需要注意 那么对于 common 模块来说，分别被三个不同的 Chunk 引入，此时引用次数为 3，命中 optimization.splitChunks.minChunks = 2 规则，因此该模块「可能」会被单独分包 ，并行数为 2 + 1 = 3，此时若 maxInitialRequest = 2，则分包数超过阈值，SplitChunksPlugin 会放弃 common-1 、common-2 中体积较小的分包。 配置项则分包成功，commont 会被分离为单独的 Chunk，否则会被合并入原来的 3 个 Chunk。 ：用于设置缓存组规则，为不同类型的资源设置更有针对性的分包策略 三、拆分运行时包 在《Webpack 原理系列六：彻底理解 Webpack 运行时》一文中，已经比较深入介绍 Webpack 运行时的概念
5.6K21编辑于 2021-12-09 - 来自专栏【腾讯云开发者】
webpack基础、分包大揭秘
导语 | 若你对webpack仅仅是处于使用阶段，觉得webpack原理太杂太乱太多，但是觉得大概了解下webpack的大致原理也不错。亦或是想要了解分包优化如何进行配置呢？ optimization: { splitChunks: { // 设定引用次数超过 3 的模块才进行分包 minChunks: 3 }, },} SplitChunksPlugin 那么对于common模块来说，分别被三个不同的Chunk引入，此时引用次数为 3，命中optimization.splitChunks.minChunks=2规则，因此该模块「可能」会被单独分包，最终产物 =3，此时若maxInitialRequest= 2，则分包数超过阈值，SplitChunksPlugin会放弃common-1、common-2中体积较小的分包。 」 「尽量保持」 chunks='all' 八、构建打包工具比较 参考资料： 1.Webpack前世今生-说故事的五公子-博客园 2.为什么选择webpack | webpack中文文档 3.GitHub-morrain
1.9K10编辑于 2022-06-16 - 来自专栏掘金安东尼
webpack4 之 cacheGroups 分包【究极奥义】
分析工具 webpack 打包分析有它就够了：webpack-bundle-analyzer 安装 npm install --save-dev webpack-bundle-analyzer 配置：因为 chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, 虽然这不会是最终的结果，但本瓜可以先下一个结论： 配置 cacheGroups，权衡拆包与并包二者，便是 webpack 分包的究极奥义！ 策略小结 基于本次分包，本瓜简单梳理一下策略： 公共的库是一定要尽量拆的。 公共的库尽量做到按需加载，这也是优化首屏加载需要注意的。 分包不能太细，0KB 至 10 KB 的包是极小的包，应当考虑合并。
1.6K20编辑于 2022-09-22 - 来自专栏Tecvan
有点难的知识点： Webpack Chunk 分包规则详解
默认分包规则 Webpack 4 之后编译过程大致上可以拆解为四个阶段(参考：[万字总结] 一文吃透 Webpack 核心原理)： 在构建(make) 阶段，webpack 从 entry 出发根据模块间的引用关系 到了生成(seal) 阶段，webpack 会根据模块依赖图的内容组织分包 —— Chunk 对象，默认的分包规则有： 同一个 entry 下触达到的模块组织成一个 chunk 异步模块单独组织为一个 Runtime 分包 重点：Webpack 5 之后还能根据 entry.runtime 配置单独打包运行时代码。 除了 entry、异步模块外，webpack 5之后还支持基于 runtime 的分包规则。 为了解决这个问题，webpack 3 引入 CommonChunkPlugin 插件试图将 entry 之间的公共依赖提取成单独的 chunk，但 CommonChunkPlugin 本质上是基于 Chunk
2.1K30编辑于 2021-12-09 - 来自专栏服务器运维笔记
有点难的知识点： Webpack Chunk 分包规则详解
默认分包规则 Webpack 4 之后编译过程大致上可以拆解为四个阶段(参考：[万字总结] 一文吃透 Webpack 核心原理)： ? 到了生成(seal) 阶段，webpack 会根据模块依赖图的内容组织分包 —— Chunk 对象，默认的分包规则有： 同一个 entry 下触达到的模块组织成一个 chunk 异步模块单独组织为一个 Runtime 分包 重点：Webpack 5 之后还能根据 entry.runtime 配置单独打包运行时代码。 除了 entry、异步模块外，webpack 5之后还支持基于 runtime 的分包规则。 为了解决这个问题，webpack 3 引入 CommonChunkPlugin 插件试图将 entry 之间的公共依赖提取成单独的 chunk，但 CommonChunkPlugin 本质上是基于 Chunk
1.8K20发布于 2021-06-16 - 来自专栏前端Q
Webpack的异步加载原理及分包策略(深度好文，建议收藏)
分包策略 在 webpack 打包过程中，经常出现 vendor.js， app.js 单个文件较大的情况，这偏偏又是网页最先加载的文件，这就会使得加载时间过长，从而使得白屏时间过长，影响用户体验。 所以我们需要有合理的分包策略。 ', chunks: 'initial', minChunks: 2, }), ] 我们把以下文件单独抽离出来打包 node_modules 文件夹下的，模块 被 3 个 入口 chunk 是否被共享或者是来自 node_modules 的模块 新的 chunk 体积在压缩之前是否大于 30kb 按需加载 chunk 的并发请求数量小于等于 5 个 页面初始加载时的并发请求数量小于等于 3 这是一个后台管理系统项目，大部分内容由 3-4 个前端开发，平时开发周期较短，且大部分人没有优化意识，只是写好业务代码完成需求，日子一长，造成打包出来的文件较大，大大影响性能。
5.1K32发布于 2020-12-07 Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60%
Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60% 我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/ invite_code=gbsa5hpojof 背景与目标 目标：在不改变业务功能的前提下，将构建速度提升 60%，同时降低首屏包体与提高二次编译速度 方法：分包策略（splitChunks/runtimeChunk : 'all'：统一管理同步/异步资源，避免重复打包 cacheGroups.vendor/ui/commons：框架与重 UI 库独立分包、公共代码抽取，提升缓存命中率 runtimeChunk: ' headers: { 'Cache-Control': 'public, max-age=0' } } CI（GitHub Actions）缓存示例： - uses: actions/cache@v3 Webpack 5 的持久化缓存 + 分包 + 并行压缩是提升构建速度与运行时性能的核心组合 通过度量→策略→验证的闭环，构建时间可稳定下降约 60%，同时保持可维护的包结构与良好缓存命中率
39910编辑于 2025-12-15- 来自专栏前端博客
webpack性能优化(1):分隔分包异步加载+组件与路由懒加载
如何与webpack配合实现组件懒加载webpack chunk 流webpack配置文件中的output路径配置chunkFilename属性output: { path: resolve(__ ，不推荐——webpack2官网上已经声明将逐渐废除() => system.import(URL)() => import(URL)需要webpack > 2.4，v1不支持——webpack2官网推荐使 ，官方文档webpack中使用import(), 属于es7范畴,require是由webpack社区提供方案，import为es官方提供；如果遇到使用import 报错，需要安装babelrc， 需要配合 /p/159216534vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure() https://segmentfault.com/ a/1190000011519350https://webpack.js.org/guides/code-splitting/转载本站文章《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载
1.9K10编辑于 2023-03-18 - 来自专栏快乐阿超
uniapp分包
——莫言 我们在使用uniapp进行微信小程序开发时可能会遇到如下情况： 这是因为微信小程序官方文档提到： 某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载 在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。 所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作
2.1K10编辑于 2022-08-17 - 来自专栏你的小程序
分包异步化 分包难题不用怕
多业务的分包难以划分 分包体积膨胀 下载并注入无用代码 插件无法实现分包处理 …… 为解决上述问题，微信团队提供【分包异步化】新能力，实现跨分包组件、跨分包方法，成功解决分包难、分包不合理等问题。 • • 分包异步化原理 • • 原有的分包隔离机制导致各分包之间无法引用自定义组件或逻辑代码，因此导致分包难等一系列问题。 分包异步化能力打通不同分包的引用关系，解决小程序代码包合理化的问题，支持跨分包组件、跨分包方法。 分包异步化.png • • 跨分包组件 • • 当使用其他分包组件时，代码包需要增加占位组件 (component placeholder)，实现页面高效配置。 完成渲染后，开始下载和注入分包 3.
1.3K60发布于 2021-09-16 - 来自专栏禅境花园
webpack3 升级 webpack4
据说 webpack3 比 webpack4 编译速度将近快了 60%-80%， 成功升级之后，于是来记录下，项目主要是 vue ^2.5.9 ， webpack ^4.10.2 ， webpack-dev-sever 4 +++ const ExtractTextPlugin = require('extract-text-webpack-plugin') //for webpack3 ----- module.exports 4 +++ - new ExtractTextPlugin({filename:'main.css'}) //for webpack 3 --- ] ... } webpack-dev-server 3 升级 4 之后需要改动的配置 plugins: [ //已经移除 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor /node_modules')) === 0 ) } }), new webpack.optimize.UglifyJsPlugin(...）
84920编辑于 2022-10-25 - 来自专栏zaking's
走进webpack（3）-- 小结
写这一系列的文章，本意是想要梳理一下自己凌乱的webpack知识，只是使用过vue-cli，修改过其中的一部分代码，但是对于一个简单项目从0开始搭建webpack的流程和其中的依赖并不是十分清楚。 但是无奈运气不好，偏偏恰逢webpack4热火朝天的上线了，在webpack3时代的一部分使用方法已经没办法照葫芦画瓢了。所以一边查看文档和github，给大家找到了一些并不是很完美的解决方案。 先给大家介绍一个webpack自带的小插件，BannerPlugin，我们在前面的文章中说过，webpack自带的插件需要引入webpack，前面已经引入过了，这里就不再重复说明，然后我们只需要在plugins 想要将静态资源集中，我们需要一个插件copy-webpack-plugin。 而目前webpack4的发布，使很多小伙伴都迫不及待地想要尝尝鲜，但是webpack3仍旧是当前的主流，而且4的文档并不全面，很多功能如果英文不太好的话还是很难的。
76970发布于 2018-05-02 - 来自专栏向治洪
android分包方案
下面通过一个简单的demo来讲述dex分包方案，该方案分为两步执行： ? 一、编译时分包 整个编译流程如下： ? 除了框出来的两Target，其它都是编译的标准流程。而这两个Target正是我们的分包操作。首先来看看spliteClasses target。 ? 到此，分包完毕，接下来，便来分析一下如何动态将第二个dex包注入系统的ClassLoader。 但是使用dex分包方案仍然有几个注意点： 1. 由于上述第一点的限制，假如我们的app越来越臃肿和庞大，往往会采取dex分包方案和插件化方案配合使用，将一些非核心独立功能做成插件加载，核心功能再分包加载。
1.1K100发布于 2018-01-30 - 来自专栏前端杂货铺-Gopal
webpack3 升级到 webpack4 小记
背景 团队开发的时候，发现启动项目服务 npm run dev 很慢，我试了一下，要三四十秒，这对于我们开发来讲，会导致开发效率下降很多，而我们目前使用的是 webpack3，所以我想尝试通过升级 webpack 来提升一下编译打包的速度 注：代码大部分参照网络，可以在后面看到链接 调研 webpack3 升级到 webpack4 的话，还是做了很大的改动，我查询资料总结如下（当然不止以下改动）： ? by instanceof Entrypointinstead 解决方法： 这个是因为 webpack 4 不再 支持 extract-css-chunks-webpack-plugin，我们可以使用 webpack-manifest-plugin": "^2.0.4" 问题 5 Error: webpack.optimize.UglifyJsPlugin has been removed, please 我们可以设置如下： "dev": "webpack --mode development", "build": "webpack --mode production" 这样我们就可以不用使用
1.5K20发布于 2020-09-24 - 来自专栏向治洪
dex分包方案
下面通过一个简单的demo来讲述dex分包方案，该方案分为两步执行： ? 一、编译时分包 整个编译流程如下： ? 除了框出来的两Target，其它都是编译的标准流程。而这两个Target正是我们的分包操作。首先来看看spliteClasses target。 ? 到此，分包完毕，接下来，便来分析一下如何动态将第二个dex包注入系统的ClassLoader。 但是使用dex分包方案仍然有几个注意点： 1. 由于上述第一点的限制，假如我们的app越来越臃肿和庞大，往往会采取dex分包方案和插件化方案配合使用，将一些非核心独立功能做成插件加载，核心功能再分包加载。
1.3K50发布于 2018-02-01 - 来自专栏TECH flower
按功能（特性）分包
一种流行的方法是通过技术层面对项目进行分包。但是这种方法有一些缺点。相反，我们可以按功能分包并创建独立自治的程序包。结果是一个易于理解且不易出错的代码库。 ? 按功能分包从而创建包含功能所需的所有类的程序包。好处是： 更好的可发现性和概览 独立且自治 更简单的代码 可测试性 便于团队协作开发 按照技术分层分包 项目结构的一种非常流行的方法是逐层分包。 ⚠️：按层分包从技术角度对所有类进行分组 让我们将调用层次结构添加到图片中，以“清楚地”了解哪个类取决于其他哪个类。 ? ⚠️：调用层次结构遍及整个项目，涉及许多包 那么，按层分包的缺点是什么？ 关于按功能分包的部分如下所示： 我们基于功能分包。每个功能包均包含提供该功能所需的大多数代码。每个功能包都应独立且自治。 ─ Feature1DTOs.kt │ ├── Feature1Entities.kt │ └── Feature1Configuration ├── feature2 ├── feature3
1.4K21发布于 2020-08-06 - 来自专栏马涛涛的专栏
webpack@3简单使用
这篇博客用的是webpack3的版本，作为入门理解学习 非原创，只为学习记录。博客大部分内容引用来源如下： 作者：夕阳 来源：掘金 著作权归作者所有。 如果侵权，立即删除！ 语言多 变化快 webpack横空出世。 webpack：从入门到真实项目配置（注意文中作者配置的是webpack@3）————掘金 为什么要用webpack？ 使用 webpack3 mkdir webpack-demo cd webpack-demo // 创建 package.json，这里会问一些问题，直接回车跳过就行 npm init // 推荐这个安装方式 ，当然你也安装在全局环境下 // 这种安装方式会将 webpack 放入 devDependencies 依赖中 npm install --save-dev webpack@3 然后按照下图创建文件 7.x | babel 6.x 官方文档说 webpack3搭配babel-loader 7和babel 6 如果是版本4 那么webpack 4.x | babel-loader 7.x | babel
1.3K60发布于 2018-10-31 - 来自专栏李维亮的博客
mpvue小程序分包
基于mpvue小程序进行分包首先在 pages / 下，新建 packageA/index 目录，在目录下再新建两个文件，index.vue和 main.js ，目录结构如下图所示: ?
64460发布于 2021-07-08 - 来自专栏云计算运维
webpack 为什么这么难用？3
webpack 给出的答案是：通过 webpack + loader + plugin，让一切资源构建可配置。 在 webpack 的基础上进一步封装，来帮你自动生成 webpack 的配置。 随着 webpack 配置越来越复杂，维护成本也越来越高，于是诞生了很多脚手架工具，帮你生成 webpack 的配置，封装起 webpack 的复杂性。 那么未来的下一代前端构建工具是怎样的呢？ 总结 这篇文章很久之前就在构思了，只是近期在工作上集中遇到了很多 webpack 的坑，让我彻底有动力来吐槽一下它的种种不是。 webpack 为什么这么难用？ 其实，这篇文章其实有标题党的嫌疑，更准确的标题应该是： 《现在的 webpack 为什么这么难用？》 因为这篇文章里提到的问题，都会在 webpack 4.0 中得到改善。
51330发布于 2021-07-16 - 来自专栏全栈程序员必看
走近webpack（3）–图片的处理
上一章，咱们学了如何用webpack来打包css，压缩js等。这一篇文章咱们来学习一下如何用webpack来处理图片。废话不多说，咱们开始吧。 /images/dog.jpg); width: 500px; height: 500px; } ok,我们写完了代码，现在webpack是无法解析的，我们可以打包试一下，发现会报错 但是webpack官方认为css就应该打包进js中以减少http请求。所以，仁者见仁智者见智，怎么做看具体情况来选择吧。 其实要解决这个问题很简单，用插件，extract–text–webpack–plugin。怎么安装就不说了，已经说了好多遍了，跟上面的安装方法一样，改个名字而已。 当前还没有支持webpack4.x，那么我们该怎么办呢？
76210编辑于 2022-07-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号