- 综合排序
- 最热优先
- 最新优先
- 来自专栏Tecvan
Webpack 性能系列四：分包优化
一、什么是分包 默认情况下，Webpack 会将所有代码构建成一个单独的包，这在小型项目通常不会有明显的性能问题，但伴随着项目的推进，包体积逐步增长可能会导致应用的响应耗时越来越长。 为此，Webpack 专门提供了 SplitChunksPlugin 插件，用于实现产物分包。 二、使用 SplitChunksPlugin SplitChunksPlugin 是 Webpack 4 之后引入的分包方案(此前为 CommonsChunkPlugin)，它能够基于一些启发式的规则将 2.1 什么是 Chunk 在《有点难的知识点：Webpack Chunk 分包规则详解》一文中，我们已经了解到 Chunk 是打包产物的基本组织单位，读者可以等价认为有多少 Chunk 就会对应生成多少产物 ：用于设置缓存组规则，为不同类型的资源设置更有针对性的分包策略 三、拆分运行时包 在《Webpack 原理系列六：彻底理解 Webpack 运行时》一文中，已经比较深入介绍 Webpack 运行时的概念
5.5K21编辑于 2021-12-09 - 来自专栏【腾讯云开发者】
webpack基础、分包大揭秘
导语 | 若你对webpack仅仅是处于使用阶段，觉得webpack原理太杂太乱太多，但是觉得大概了解下webpack的大致原理也不错。亦或是想要了解分包优化如何进行配置呢？ 以及为什么webpack官方分包配置会从 CommmonsChunkPlugin演变成SplitChunksPlugin呢？ 一、webpack前生今世 （一）前端石器时代----->工业化时代 前端变迁转折点 2008年9月2号，当Chrome第一次出现的时候（V8与Chrome同一天宣布开源），它对网页的加载速度让所有人惊叹 ，是V8引擎把JavaScript的运行速度提上来了，让前端从蒸汽机机时代正式步入内燃机时代。 6.Javascript模块化编程（二）：AMD规范-阮一峰的网络日志 7.Javascript模块化编程（三）：require.js的用法-阮一峰的网络日志 8.
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.5K20编辑于 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 有人称它为异步加载， DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>" /> <meta name="viewport" content webpack.ensure 就解决了这个问题。 分包策略 在 webpack 打包过程中，经常出现 vendor.js， app.js 单个文件较大的情况，这偏偏又是网页最先加载的文件，这就会使得加载时间过长，从而使得白屏时间过长，影响用户体验。 所以我们需要有合理的分包策略。
5.1K32发布于 2020-12-07 Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60%
Webpack 5 优化指南：分包策略、缓存配置及构建速度提升 60% 我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/ invite_code=gbsa5hpojof 背景与目标 目标：在不改变业务功能的前提下，将构建速度提升 60%，同时降低首屏包体与提高二次编译速度 方法：分包策略（splitChunks/runtimeChunk [contenthash:8].js', chunkFilename: 'js/[name]. [contenthash:8].js', assetModuleFilename: 'assets/[name]. Webpack 5 的持久化缓存 + 分包 + 并行压缩是提升构建速度与运行时性能的核心组合 通过度量→策略→验证的闭环，构建时间可稳定下降约 60%，同时保持可维护的包结构与良好缓存命中率
36210编辑于 2025-12-15- 来自专栏前端博客
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.8K10编辑于 2023-03-18 - 来自专栏快乐阿超
uniapp分包
在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。 目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作 navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8 ", "backgroundColor": "#F8F8F8" } } 对应的目录为： ┌─pages │ ├─index │ │ └─index.nvue ", "backgroundColor": "#F8F8F8" } } 主要就是将子包中的页面，放到了subPackages下对应的子包配置中，以及配置了根路径root，再修改具体的路径 改完后，
2K10编辑于 2022-08-17 - 来自专栏你的小程序
分包异步化 分包难题不用怕
多业务的分包难以划分 分包体积膨胀 下载并注入无用代码 插件无法实现分包处理 …… 为解决上述问题，微信团队提供【分包异步化】新能力，实现跨分包组件、跨分包方法，成功解决分包难、分包不合理等问题。 • • 分包异步化原理 • • 原有的分包隔离机制导致各分包之间无法引用自定义组件或逻辑代码，因此导致分包难等一系列问题。 分包异步化能力打通不同分包的引用关系，解决小程序代码包合理化的问题，支持跨分包组件、跨分包方法。 分包异步化.png • • 跨分包组件 • • 当使用其他分包组件时，代码包需要增加占位组件 (component placeholder)，实现页面高效配置。 例如页面展示时，分包 (subpackageB) 仍未下载，进行以下操作实现跨分包组件： 1.
1.3K50发布于 2021-09-16 - 来自专栏向治洪
android分包方案
下面通过一个简单的demo来讲述dex分包方案，该方案分为两步执行： ? 一、编译时分包 整个编译流程如下： ? 除了框出来的两Target，其它都是编译的标准流程。而这两个Target正是我们的分包操作。首先来看看spliteClasses target。 ? 到此，分包完毕，接下来，便来分析一下如何动态将第二个dex包注入系统的ClassLoader。 但是使用dex分包方案仍然有几个注意点： 1. 由于上述第一点的限制，假如我们的app越来越臃肿和庞大，往往会采取dex分包方案和插件化方案配合使用，将一些非核心独立功能做成插件加载，核心功能再分包加载。
1.1K100发布于 2018-01-30 - 来自专栏向治洪
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 - 来自专栏李维亮的博客
mpvue小程序分包
基于mpvue小程序进行分包首先在 pages / 下，新建 packageA/index 目录，在目录下再新建两个文件，index.vue和 main.js ，目录结构如下图所示: ?
64260发布于 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.6K10编辑于 2024-03-11 - 来自专栏QQ音乐技术团队的专栏
React-Native 分包实践
return; } // Parse response as text NSStringEncoding encoding = NSUTF8StringEncoding
3.9K60发布于 2018-01-30 - 来自专栏软件方法
针对需求分包的情况，是否要为每个分包寻找出它的组织
fochaillee (747**11) 2012-08-28 16:24:56 潘老师，请教一下，业务建模过程中，针对需求分包的情况，是否要为每个分包寻找出它的组织？以及找到这个组织要解决的问题？ 这和"需求分包"无关。
55230发布于 2021-04-22 - 来自专栏腾讯Bugly的专栏
dex分包变形记
在Android 版本的历史上，LinearAlloc 分别经历了4M/5M/8M/16M限制。Android 2.2和2.3的缓冲区只有5MB，Android 4.x提高到了8MB 或16MB。 所以，最终我们采用了 dex 分包的方案，来避开了 Android 3.0以下平台的方法数和 LinearAlloc 限制。 简单的说，分包就是在打包时将应用的代码分成多个 dex，使得主 dex 的方法数和所需的 LinearAlloc 不超过系统限制。 生成的 apk 包跟 dex 分包前一样。为什么会这样？ 由于分包是一个比较复杂和耗时的过程，开始时分包脚本的性能并不理想，后来经过我们两次优化，将打包过程中的分包时间从7分多钟优化到10秒以内； （3） 研究未来可能的按需加载或异步加载从 dex 的问题。
2.1K110发布于 2018-03-23 - 来自专栏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 用来设置模块如何被解析。
44810发布于 2020-05-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号