- 综合排序
- 最热优先
- 最新优先
- 来自专栏Tecvan
Webpack 性能系列四：分包优化
为此，Webpack 专门提供了 SplitChunksPlugin 插件，用于实现产物分包。 -1 、common-2 两个分包，并行数为 2 + 1 = 3，此时若 maxInitialRequest = 2，则分包数超过阈值，SplitChunksPlugin 会放弃 common-1 、common -2 中体积较小的分包。 ❞ 以上述模块关系为例： 若此时 Webpack 配置的 minChunks 大于 2，且 maxInitialRequests 也同样大于 2，如果 common 模块的体积大于上述说明的 minxSize ：用于设置缓存组规则，为不同类型的资源设置更有针对性的分包策略 三、拆分运行时包 在《Webpack 原理系列六：彻底理解 Webpack 运行时》一文中，已经比较深入介绍 Webpack 运行时的概念
5.6K21编辑于 2021-12-09 - 来自专栏【腾讯云开发者】
webpack基础、分包大揭秘
导语 | 若你对webpack仅仅是处于使用阶段，觉得webpack原理太杂太乱太多，但是觉得大概了解下webpack的大致原理也不错。亦或是想要了解分包优化如何进行配置呢？ 若minChunks=2，则common-1 、common-2同时命中minChunks规则被分别打包，浏览器请求entry-b时需要同时请求common-1、common-2两个分包，并行数为2+1 =3，此时若maxInitialRequest= 2，则分包数超过阈值，SplitChunksPlugin会放弃common-1、common-2中体积较小的分包。 对引用次数大于等于2的模块，也就是被多个Chunk引用的模块，单独打包。 七、SplitChunksPlugin最佳实战 那么，如何设置最适合项目情况的分包规则呢？ 」 「尽量保持」 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 配置：因为 虽然这不会是最终的结果，但本瓜可以先下一个结论： 配置 cacheGroups，权衡拆包与并包二者，便是 webpack 分包的究极奥义！ { // split async commons chunk name: 'chunk-async-commons', minChunks: 2, 策略小结 基于本次分包，本瓜简单梳理一下策略： 公共的库是一定要尽量拆的。 公共的库尽量做到按需加载，这也是优化首屏加载需要注意的。 分包不能太细，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 分包规则的基本逻辑就介绍完毕了，实现上，大部分功能代码都集中在： webpack/lib/compilation.js 文件的 seal 函数 webpack/lib/buildChunkGraph.js
2.1K30编辑于 2021-12-09 - 来自专栏服务器运维笔记
有点难的知识点： Webpack Chunk 分包规则详解
默认分包规则 Webpack 4 之后编译过程大致上可以拆解为四个阶段(参考：[万字总结] 一文吃透 Webpack 核心原理)： ? 到了生成(seal) 阶段，webpack 会根据模块依赖图的内容组织分包 —— Chunk 对象，默认的分包规则有： 同一个 entry 下触达到的模块组织成一个 chunk 异步模块单独组织为一个 Runtime 分包 重点：Webpack 5 之后还能根据 entry.runtime 配置单独打包运行时代码。 除了 entry、异步模块外，webpack 5之后还支持基于 runtime 的分包规则。 同时生成三个文件： 入口 index 对应的 index.js 入口 index 对应的 home.js 运行时代码对应的 solid-runtime.js 分包规则的问题 至此，webpack 分包规则的基本逻辑就介绍完毕了
1.8K20发布于 2021-06-16 - 来自专栏前端Q
Webpack的异步加载原理及分包策略(深度好文，建议收藏)
/B.js') alert(B) }) } 此时，我们再进行一下打包，发现多了 1.index.js 和 2.index.js 两个文件。 而我们打开页面时只引入了 index.js 一个文件，当点击按钮 A 的时候才引入 1.index.js 文件，点击按钮 B 的时候才引入 2.index.js 文件。 分包策略 在 webpack 打包过程中，经常出现 vendor.js， app.js 单个文件较大的情况，这偏偏又是网页最先加载的文件，这就会使得加载时间过长，从而使得白屏时间过长，影响用户体验。 所以我们需要有合理的分包策略。 ', chunks: 'initial', minChunks: 2, }), ] 我们把以下文件单独抽离出来打包 node_modules 文件夹下的，模块 被 3 个 入口 chunk
5.1K32发布于 2020-12-07 Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60%
Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60% 我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/ invite_code=gbsa5hpojof 背景与目标 目标：在不改变业务功能的前提下，将构建速度提升 60%，同时降低首屏包体与提高二次编译速度 方法：分包策略（splitChunks/runtimeChunk element-plus|antd|@mui)/, name: 'ui', priority: 9 }, commons: { name: 'commons', minChunks: 2, (woff2?|ttf|eot)$/, type: 'asset/resource' }, { test: /\. 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官网推荐使 title: 'home' }}require.ensurerequire.ensure([…modules],()=>{}[,errorCallBack[,chunkName]]);v1和v2均可使用 ， 异步加载的组件将会比页面中其他元素滞后出现， 页面会有瞬间闪跳影响；因为在首次加载组件的时候会有加载时间， 出现页面滞后， 所以需要合理的进行页面结构设计， 避免首次出现跳闪现象；只要文章：VUE2组件懒加载浅析 /code-splitting/转载本站文章《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载》,请注明出处：https://www.zhoulujun.cn/html/tools/
1.9K10编辑于 2023-03-18 - 来自专栏前端
【小程序分包】小程序包大于2M，来这教你分包啊
前言缘由该大的不大，小程序包超出2M，无法上传发布前段时间项目迭代时，因版本大升级，导致uniapp打包后小程序后，包体积大于2M。 虽然将图片等静态资源压缩，体积大的资源放置cdn，在不懈的努力下，治标不治本，包体积还是不听话的长到2M以上。 憋的实在没办法，遂将小程序分包，彻底解除封印，特来跟大家分享下如何将小程序分包，减小主包大小。 主要目标实现2大重点如何进行小程序分包undefined如个根据分包调整配置文件正文三个问题为什么小程序会有2M的限制？1. 用户体验：小程序要求在用户进入小程序前能够快速加载，以提供良好的用户体验。 那么小程序代码的打包，可以按照功能的划分，拆分成几个分包，当需要用到某个功能时，才加载这个功能对应的分包。
5.4K20编辑于 2024-10-06 - 来自专栏快乐阿超
uniapp分包
在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。 所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作 此时可以进行简单的静态资源处理，将static目录下的图片之类的压缩或者放到在线图床上 如果在这样处理后还是提示超过2M 那么我们就进行分包 按照uniapp官方文档提到的，我们首先先将目录分出来： 例如我之前的
2.1K10编辑于 2022-08-17 - 来自专栏你的小程序
分包异步化 分包难题不用怕
多业务的分包难以划分 分包体积膨胀 下载并注入无用代码 插件无法实现分包处理 …… 为解决上述问题，微信团队提供【分包异步化】新能力，实现跨分包组件、跨分包方法，成功解决分包难、分包不合理等问题。 • • 分包异步化原理 • • 原有的分包隔离机制导致各分包之间无法引用自定义组件或逻辑代码，因此导致分包难等一系列问题。 分包异步化能力打通不同分包的引用关系，解决小程序代码包合理化的问题，支持跨分包组件、跨分包方法。 使用组件 <simple-list> 代替 <list>，使用 <view> 代替 <card>，完成页面渲染 2. 完成渲染后，开始下载和注入分包 3. • • 在小程序开发过程中，通过require回调函数或requireAsync异步调用2种方法，分包异步化能够引用其他分包的逻辑代码。
1.3K60发布于 2021-09-16 - 来自专栏有困难要上，没有困难创造困难也要上！
Webpack2入门
介绍 webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。 Webpack可以做什么 处理module依赖关系 打包js，css和png等 降低页面初始加载时间 方便组合第三方组件库 可以转换不同语法成标准语法 安装 这里使用的是 webpack 2.4.1 版本 # 全局安装 npm install -g webpack #本地安装 npm install --save-dev webpack 一个小例子 创建应用并安装必要的依赖库 $ mkdir webpack-demo /style.css 992 bytes {0} [built] [2] ./index.js 171 bytes {0} [built] [3] ./~/css-loader!. 热部署 本地热部署 第一步：启动 webpack $ webpack --watch 第二步：修改代码 第三部：浏览器刷新（访问file:///...
97470发布于 2018-05-14 - 来自专栏向治洪
android分包方案
生成的apk在2.3以前的机器无法安装，提示INSTALL_FAILED_DEXOPT 2. Android2.3及以前版本用来执行dexopt(用于优化dex文件)的内存只分配了5M 2. 一个dex文件最多只支持65536个方法。 插件化只适合一些比较独立的模块； 2. 必须通过反射机制去调用插件的类和方法，因此，必须搭配一套插件框架来配合使用； 由于上述问题的存在，通过不断研究，便有了dex分包的解决方案。 由于第二个dex包是在Application的onCreate中动态注入的，如果dex包过大，会使app的启动速度变慢，因此，在dex分包过程中一定要注意，第二个dex包不宜过大。 2. 由于上述第一点的限制，假如我们的app越来越臃肿和庞大，往往会采取dex分包方案和插件化方案配合使用，将一些非核心独立功能做成插件加载，核心功能再分包加载。
1.1K100发布于 2018-01-30 - 来自专栏向治洪
dex分包方案
生成的apk在2.3以前的机器无法安装，提示INSTALL_FAILED_DEXOPT 2. Android2.3及以前版本用来执行dexopt(用于优化dex文件)的内存只分配了5M 2. 一个dex文件最多只支持65536个方法。 插件化只适合一些比较独立的模块； 2. 必须通过反射机制去调用插件的类和方法，因此，必须搭配一套插件框架来配合使用； 由于上述问题的存在，通过不断研究，便有了dex分包的解决方案。 由于第二个dex包是在Application的onCreate中动态注入的，如果dex包过大，会使app的启动速度变慢，因此，在dex分包过程中一定要注意，第二个dex包不宜过大。 2. 由于上述第一点的限制，假如我们的app越来越臃肿和庞大，往往会采取dex分包方案和插件化方案配合使用，将一些非核心独立功能做成插件加载，核心功能再分包加载。
1.3K50发布于 2018-02-01 - 来自专栏IMWeb前端团队
webpack2 终极优化
webpack2增加了一些新特性也正式发布了一段时间，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 可以通过这以下几点做到 压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader? OccurrenceOrderPlugin 插件让被依赖次数更高的模块靠前分到更小的id 来达到输出更少的代码，在webpack2里这些已经这两个插件已经被移除了因为这些功能已经被内置了。 要使用它你需要在执行webpack的时候带上--json --profile2个参数，这代表让webpack把构建结果以json输出并带上构建性能信息，使用如下： webpack --json --profile 最后附上这篇文章所讲到的webpack整体的配置，分为开发环境的webpack.config.js和生产环境的webpack-dist.config.js 阅读原文
1.5K110发布于 2018-01-08 - 来自专栏IMWeb前端团队
webpack2 终极优化
webpack2增加了一些新特性也正式发布了一段时间，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 可以通过这以下几点做到 压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader? OccurrenceOrderPlugin 插件让被依赖次数更高的模块靠前分到更小的id 来达到输出更少的代码，在webpack2里这些已经这两个插件已经被移除了因为这些功能已经被内置了。 要使用它你需要在执行webpack的时候带上--json --profile2个参数，这代表让webpack把构建结果以json输出并带上构建性能信息，使用如下： webpack --json --profile 整体的配置，分为开发环境的webpack.config.js和生产环境的webpack-dist.config.js 原文：https://github.com/gwuhaolin/blog/issues/2
84020发布于 2019-12-05 - 来自专栏TECH flower
按功能（特性）分包
一种流行的方法是通过技术层面对项目进行分包。但是这种方法有一些缺点。相反，我们可以按功能分包并创建独立自治的程序包。结果是一个易于理解且不易出错的代码库。 ? 按功能分包从而创建包含功能所需的所有类的程序包。好处是： 更好的可发现性和概览 独立且自治 更简单的代码 可测试性 便于团队协作开发 按照技术分层分包 项目结构的一种非常流行的方法是逐层分包。 ⚠️：按层分包从技术角度对所有类进行分组 让我们将调用层次结构添加到图片中，以“清楚地”了解哪个类取决于其他哪个类。 ? ⚠️：调用层次结构遍及整个项目，涉及许多包 那么，按层分包的缺点是什么？ 关于按功能分包的部分如下所示： 我们基于功能分包。每个功能包均包含提供该功能所需的大多数代码。每个功能包都应独立且自治。 Feature1Client │ ├── Feature1DTOs.kt │ ├── Feature1Entities.kt │ └── Feature1Configuration ├── feature2
1.4K21发布于 2020-08-06 - 来自专栏腾讯IMWeb前端团队
webpack2 终极优化
webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 优化输出 打包结果更小可以让网页打开速度更快以及简约宽带。 可以通过这以下几点做到 压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader? 插件让被依赖次数更高的模块靠前分到更小的id 来达到输出更少的代码，在webpack2里这些已经这两个插件已经被移除了因为这些功能已经被内置了。 要使用它你需要在执行webpack的时候带上--json --profile2个参数，这代表让webpack把构建结果以json输出并带上构建性能信息，使用如下： webpack --json --profile 最后附上这篇文章所讲到的webpack整体的配置，分为开发环境的webpack.config.js和生产环境的webpack-dist.config.js
85720编辑于 2022-06-29 - 来自专栏腾讯IMWeb前端团队
理论｜webpack2 终极优化
webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 可以通过这以下几点做到 1、压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader? 插件让被依赖次数更高的模块靠前分到更小的id 来达到输出更少的代码，在webpack2里这些已经这两个插件已经被移除了因为这些功能已经被内置了。 除了压缩文本代码外还可以： 1）用imagemin-webpack-plugin 压缩图片 2）用webpack-spritesmith 合并雪碧图 3）对于支持es6的js运行环境使用babili 以上优化点只需要在构建用于生产环境代码的时候才使用 要使用它你需要在执行webpack的时候带上--json --profile2个参数，这代表让webpack把构建结果以json输出并带上构建性能信息，使用如下： 会生产一个stats.json文件，
87010编辑于 2022-06-29 - 来自专栏李维亮的博客
mpvue小程序分包
基于mpvue小程序进行分包首先在 pages / 下，新建 packageA/index 目录，在目录下再新建两个文件，index.vue和 main.js ，目录结构如下图所示: ?
64460发布于 2021-07-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号