- 综合排序
- 最热优先
- 最新优先
- 来自专栏Tecvan
Webpack 性能系列四：分包优化
一、什么是分包 默认情况下，Webpack 会将所有代码构建成一个单独的包，这在小型项目通常不会有明显的性能问题，但伴随着项目的推进，包体积逐步增长可能会导致应用的响应耗时越来越长。 为此，Webpack 专门提供了 SplitChunksPlugin 插件，用于实现产物分包。 二、使用 SplitChunksPlugin SplitChunksPlugin 是 Webpack 4 之后引入的分包方案(此前为 CommonsChunkPlugin)，它能够基于一些启发式的规则将 ：用于设置缓存组规则，为不同类型的资源设置更有针对性的分包策略 三、拆分运行时包 在《Webpack 原理系列六：彻底理解 Webpack 运行时》一文中，已经比较深入介绍 Webpack 运行时的概念 「保持按路由分包，减少首屏资源负载」 设想一个超过 10 个页面的应用，假如将这些页面代码全部打包在一起，那么用户访问其中任意一个页面都需要等待其余 9 个页面的代码全部加载完毕后才能开始运行应用，这对
5.6K21编辑于 2021-12-09 - 来自专栏【腾讯云开发者】
webpack基础、分包大揭秘
导语 | 若你对webpack仅仅是处于使用阶段，觉得webpack原理太杂太乱太多，但是觉得大概了解下webpack的大致原理也不错。亦或是想要了解分包优化如何进行配置呢？ 以及为什么webpack官方分包配置会从 CommmonsChunkPlugin演变成SplitChunksPlugin呢？ 一、webpack前生今世 （一）前端石器时代----->工业化时代 前端变迁转折点 2008年9月2号，当Chrome第一次出现的时候（V8与Chrome同一天宣布开源），它对网页的加载速度让所有人惊叹 四、chunk概念及分包基本规则 （一）webpack资源形态流转 webpack资源形态流转 从资源流转的层面，我们来看下webpack的打包流程： compiler.make阶段： entry文件以 [万字总结] 一文吃透Webpack核心原理 9.Webpack系列第五篇：彻底理解Webpack运行时 10.webpack chunk相关分享 作者简介 李倩倩 腾讯前端开发工程师 腾讯前端开发工程师
1.9K10编辑于 2022-06-16 - 来自专栏掘金安东尼
webpack4 之 cacheGroups 分包【究极奥义】
(●'◡'●) webpack4 最核心的特性是 【splitChunks】，splitChunks 最核心的配置是 cacheGroups！ 基于这个两个前提，我们再进行下一步。 分析工具 webpack 打包分析有它就够了：webpack-bundle-analyzer 安装 npm install --save-dev webpack-bundle-analyzer 配置：因为 虽然这不会是最终的结果，但本瓜可以先下一个结论： 配置 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 分包规则的基本逻辑就介绍完毕了，实现上，大部分功能代码都集中在： 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的异步加载原理及分包策略(深度好文，建议收藏)
作者：lzg9527 原文链接：https://segmentfault.com/a/1190000038180453 webpack 异步加载原理 webpack ensure 有人称它为异步加载， = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 引入 webpack.ensure 就解决了这个问题。 分包策略 在 webpack 打包过程中，经常出现 vendor.js， app.js 单个文件较大的情况，这偏偏又是网页最先加载的文件，这就会使得加载时间过长，从而使得白屏时间过长，影响用户体验。 所以我们需要有合理的分包策略。
5.1K32发布于 2020-12-07 - 来自专栏前端博客
webpack性能优化(1):分隔分包异步加载+组件与路由懒加载
webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这个家伙到底是用来干嘛的？ 如何与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， 需要配合 a/1190000011519350https://webpack.js.org/guides/code-splitting/转载本站文章《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载
1.9K10编辑于 2023-03-18 Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60%
Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60% 我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/ invite_code=gbsa5hpojof 背景与目标 目标：在不改变业务功能的前提下，将构建速度提升 60%，同时降低首屏包体与提高二次编译速度 方法：分包策略（splitChunks/runtimeChunk , reuseExistingChunk: true }, ui: { test: /(element-plus|antd|@mui)/, name: 'ui', priority: 9 : 'all'：统一管理同步/异步资源，避免重复打包 cacheGroups.vendor/ui/commons：框架与重 UI 库独立分包、公共代码抽取，提升缓存命中率 runtimeChunk: ' Webpack 5 的持久化缓存 + 分包 + 并行压缩是提升构建速度与运行时性能的核心组合 通过度量→策略→验证的闭环，构建时间可稳定下降约 60%，同时保持可维护的包结构与良好缓存命中率
39910编辑于 2025-12-15- 来自专栏快乐阿超
uniapp分包
——莫言 我们在使用uniapp进行微信小程序开发时可能会遇到如下情况： 这是因为微信小程序官方文档提到： 某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载 在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。 所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作
2.1K10编辑于 2022-08-17 - 来自专栏你的小程序
分包异步化 分包难题不用怕
多业务的分包难以划分 分包体积膨胀 下载并注入无用代码 插件无法实现分包处理 …… 为解决上述问题，微信团队提供【分包异步化】新能力，实现跨分包组件、跨分包方法，成功解决分包难、分包不合理等问题。 • • 分包异步化原理 • • 原有的分包隔离机制导致各分包之间无法引用自定义组件或逻辑代码，因此导致分包难等一系列问题。 分包异步化能力打通不同分包的引用关系，解决小程序代码包合理化的问题，支持跨分包组件、跨分包方法。 分包异步化.png • • 跨分包组件 • • 当使用其他分包组件时，代码包需要增加占位组件 (component placeholder)，实现页面高效配置。 例如页面展示时，分包 (subpackageB) 仍未下载，进行以下操作实现跨分包组件： 1.
1.3K60发布于 2021-09-16 - 来自专栏coding for love
5-8~9 webpack 性能优化（1）
简介 接下来几节，我们一起学习如何优化 webpack 性能，提升打包速度。 1. 跟上技术的迭代，使用最新的依赖 首先，webpack 版本在迭代更新的过程中会做很多的优化。 同样的道理， webpack 打包依赖的 node ，npm ，yarn，也应尽可能使用新版本。 2. 3. plugin 尽可能精简并确保可靠 不需要使用的 plugin 应该精简，比如 dev 环境下我们并不需要去压缩代码，那么诸如：uglifyjs-webpack-plugin，terser-webpack-plugin ，optimize-css-assets-webpack-plugin 等。 另外，因为 webpack 的插件非常多，选用的时候尽可能选择官方推荐或者已经比较成熟经过验证的插件。 4. resolve 参数合理配置 resolve 用来设置模块如何被解析。
45910发布于 2020-05-18 - 来自专栏向治洪
android分包方案
下面通过一个简单的demo来讲述dex分包方案，该方案分为两步执行： ? 一、编译时分包 整个编译流程如下： ? 除了框出来的两Target，其它都是编译的标准流程。而这两个Target正是我们的分包操作。首先来看看spliteClasses target。 ? 到此，分包完毕，接下来，便来分析一下如何动态将第二个dex包注入系统的ClassLoader。 但是使用dex分包方案仍然有几个注意点： 1. 由于上述第一点的限制，假如我们的app越来越臃肿和庞大，往往会采取dex分包方案和插件化方案配合使用，将一些非核心独立功能做成插件加载，核心功能再分包加载。
1.1K100发布于 2018-01-30 - 来自专栏前端修炼之路
【第9期】webpack入门学习手记（三）
webpack有两大特色： 动态打包。在webpack中，每个模块都会声明所引用的依赖，这样就避免了打包没有使用到的模块。另外通过配置，可以避免重复打包相同的引用，提高打包效率。 强大的loader。 用浏览器检查一下页面，就会知道webpack是怎么做到的了。 说明webpack将css代码自动添加到head标签中了，非常的智能化~ 加载图片 接下来尝试下加载图片和在css中引用背景图片。 首先告诉webpack字体文件使用file-loader进行加载。 加载数据 webpack可以加载任何类型的数据，例如JSON, CSV, TSV, 和XML。webpack默认内置了JSON加载数据。 照着官网的例子一步步来。 需要将webpack4版本 降到webpack3版本。我找到的版本是3.11.0。我将wepack卸载掉，然后安装这个版本之后，再次打包，就成功了。
1.3K20发布于 2020-03-24 - 来自专栏向治洪
dex分包方案
下面通过一个简单的demo来讲述dex分包方案，该方案分为两步执行： ? 一、编译时分包 整个编译流程如下： ? 除了框出来的两Target，其它都是编译的标准流程。而这两个Target正是我们的分包操作。首先来看看spliteClasses target。 ? 到此，分包完毕，接下来，便来分析一下如何动态将第二个dex包注入系统的ClassLoader。 但是使用dex分包方案仍然有几个注意点： 1. 由于上述第一点的限制，假如我们的app越来越臃肿和庞大，往往会采取dex分包方案和插件化方案配合使用，将一些非核心独立功能做成插件加载，核心功能再分包加载。
1.3K50发布于 2018-02-01 - 来自专栏TECH flower
按功能（特性）分包
一种流行的方法是通过技术层面对项目进行分包。但是这种方法有一些缺点。相反，我们可以按功能分包并创建独立自治的程序包。结果是一个易于理解且不易出错的代码库。 ? 整体分析 按照技术分包造成的缺点： 对属于某个功能的所有类的概述不佳。 通用代码、重用代码和复杂代码趋向于难以理解，并且由于难以把握变更的影响，因此变更很容易破坏其他功能用例。 按功能分包从而创建包含功能所需的所有类的程序包。好处是： 更好的可发现性和概览 独立且自治 更简单的代码 可测试性 便于团队协作开发 按照技术分层分包 项目结构的一种非常流行的方法是逐层分包。 ⚠️：按层分包从技术角度对所有类进行分组 让我们将调用层次结构添加到图片中，以“清楚地”了解哪个类取决于其他哪个类。 ? ⚠️：调用层次结构遍及整个项目，涉及许多包 那么，按层分包的缺点是什么？ 关于按功能分包的部分如下所示： 我们基于功能分包。每个功能包均包含提供该功能所需的大多数代码。每个功能包都应独立且自治。
1.4K21发布于 2020-08-06 - 来自专栏大史住在大前端
webpack4.0各个击破（9）—— karma篇
一. webpack与自动化测试 webpack对应的关键词是模块化，它的主要任务就是打包和管理模块，所以首先需要明确的概念就是webpack之所以关联自动化测试，是因为它能够为测试脚本提供模块管理的能力 ，本质上来讲，是将webpack的打包功能嵌入了自动化测试框架，而不是将自动化测试框架作为插件集成进了webpack，理解这个区别是非常关键的。 二. karma-webpack 插件地址：https://github.com/webpack-contrib/karma-webpack 2.1 自动化单元测试库简介 先对基本的单元测试工具做一个简要说明 处理 'test/*_test.js': [ 'webpack' ], 'test/**/*_test.js': [ 'webpack' ] }, webpack 低版本的webpack可以参考karma-webpack-example这个开源项目的示例进行配置。webpack4.0以上版本可以参考下文推荐的示例。 单元测试结果： ? 覆盖率报告： ? 四.
1.5K20发布于 2018-09-10 - 来自专栏vue学习
9、webpack从0到1-devServer初探
webpack's Watch Mode webpack-dev-server webpack-dev-middleware 2、Watch模式 watch模式其实很简单，就是在package.json ", "scripts": { "build": "webpack", + "watch": "webpack --watch", "start": "webpack-dev-server 3、安装配置 首先我们进入chapter9，安装这个插件： $ cd chapter9 $ npm install webpack-dev-server --save-dev 接下来我们需要配置它，进入 /chapter9/dist/index.html； 现在我们使用它会帮我们自动打开浏览器且地址为http://localhost:8080/，它为我们起了一个新的服务器。 3、webpack-dev-middleware webpack-dev-middleware就是是一个中间件，用处就是可以把webpack打包后的文件传递给一个我们自建的服务器。
82830发布于 2020-03-20 - 来自专栏李维亮的博客
mpvue小程序分包
基于mpvue小程序进行分包首先在 pages / 下，新建 packageA/index 目录，在目录下再新建两个文件，index.vue和 main.js ，目录结构如下图所示: ?
64460发布于 2021-07-08 - 来自专栏柠檬先生
小程序分包加载
开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 在构建小程序分包项目时，构建会输出一个或多个分包。 每个使用分包小程序必须包含 一个主包，所谓的主包，即放置默认启动页/TabBar 页面，以及一些所有分包需要用到 整个小程序所有分包大小不超过 8M单个分包/主包大小不能超2M 对小程序进行分包，可以优化小程序首次启动的下载时间 ： 字段 类型 说明 root String 分包根目录 name String 分包别名，分包预下载时可以使用 pages StringArray 分包页面路径，相对与分包根目录 independent 独立分包是小程序的一种特殊类型的分包，可以独立于主包和其他分包独立运行。 ，普通分包的所有限制独立分包有效。
2.2K40发布于 2018-11-08 - 来自专栏喇叭的学堂
uniapp 配置小程序分包
分包可以减少小程序首次启动时的加载时间 分包页面（例如：商品详情页、商品列表页）。 在 uni-app 项目中，配置分包的步骤如下： 1、右键点击根目录，新建，点击创建分包的根目录，命名为 subpkg。 2、在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，定义分包相关结构： { "pages": [ { "path": "pages pages/cate/cate", "style": {} }, ], "subPackages": [ { "root": "subpkg", // 指定分包的 根目录 "pages": [] // 存放分包 页面 } ] } 3、在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息： 4、注意：分包
2.7K10编辑于 2024-03-11
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号