Webpack代码分割与懒加载

可视化演示

对比SGD、Momentum、Adam、RMSProp四种优化器在损失曲面上的收敛轨迹，展示动量加速和自适应学习率对优化路径的影响。支持轨迹动画与收敛曲线切换。

打包认知：不是越大越好

搬家时，把所有东西塞进一个超大行李箱，表面省事，实则灾难：箱子超重、搬运困难、找东西要翻腾半天。前端工程里，Webpack 默认也会把全部 JavaScript 模块打包成一个巨大的 bundle 文件。用户打开网页，浏览器必须先把整个文件下载完、解析完，页面才能渲染。首页可能只用到全部代码的 20%，剩下 80% 都在“陪跑”。

这里的“模块”是代码世界的基本单元——登录逻辑、商品列表、购物车、图表组件，每个都是独立模块。Webpack 的打包动作，就是把这些零散模块“装箱”。默认一个箱子装所有，就是灾难的根源。

打包体积可以用一个简单的公式刻画：

所以，代码分割的第一步是“拆箱”：把一个大 bundle 按边界拆成多个 chunk（代码块），让用户只下载当前需要的部分。这就如同搬家时把大箱子换成多个分类小箱，每个箱子贴好标签，要什么拿什么。

公共依赖提取：客厅的共享书架

三个房间都需要读工具书，如果每间房各买一套，浪费钱又占地方。聪明的做法是把工具书放到客厅公共书架，谁需要谁去取。前端项目里，多个页面（入口）往往共用同一个第三方库——React、axios、工具函数等。默认打包方式下，每个入口都会把这个库复制一份进去，三个页面就打包三份 React，用户被白白重复下载两遍。

splitChunks 插件做的正是“客厅书架”的工作：自动识别被多个入口引用的共享模块，将它们提取成一个独立的公共 chunk。假设有 m 个公共模块，第 k 个模块被 $d_k$ 个入口引用、体积为 $s_k$，提取后节省的体积公式如下：

例如 React 体积 140KB，被三个页面共用，提取后省下 2 × 140 = 280KB 的重复传输。公共 chunk 单独成文件还有个额外好处：它几乎不变，浏览器可以长期缓存，用户第二次访问直接命中缓存。

缓存分组策略：会贴标签的收纳师

有经验的搬家师傅不会给箱子统一命名“杂物一箱”“杂物二箱”。他们会贴标签：书、衣物、厨具、电器。找东西时看标签即知去向。splitChunks 提取公共依赖时，也不是把所有东西都塞进一个箱子，它通过 cacheGroups（缓存组）配置分组规则：用 test 匹配模块身份，用 priority 决定优先级，用 minSize 控制最小提取体积。

每个缓存组就是一个“标签”。假设有两个分组：vendors 匹配 node_modules 下的第三方库，utils 匹配 src 下的公共工具。模块 m 最终归属到所有命中组中 priority 最大的那个，用公式表达：

实际配置可能长这样：

这里 vendors 优先级 10，utils 优先级 5。React 命中 vendors 就进 vendors chunk；src/utils 下的工具函数则进 utils chunk。贴标签的本质目标是让同类模块稳定聚在一起，chunk 文件名长期不变，浏览器缓存才能发挥最大价值。

splitChunks: {  cacheGroups: {    vendors: {      test: /[\\/]node_modules[\\/]/,      priority: 10,      name: 'vendors'    },    utils: {      test: /[\\/]src[\\/]utils[\\/]/,      priority: 5,      name: 'utils'    }  }}

路由级分包：按房间就位的行李

到了新家，书放书房、衣服放卧室、厨具放厨房——你不会把书房的工具搬到卧室用。每个房间只留自己需要的东西。对于单页应用，路由就是“房间”。用户一开始只进入“首页”这个房间，完全不需要“个人中心”“订单详情”这些房间的代码。路由级分包让每个路由页面独立成 chunk，访问时才加载。

实现方式就是动态 import。把一个普通的静态导入改为 import('./pages/Home.vue')，Webpack 会立刻明白：这个模块要单独成包。首屏体积用公式表达：

代码示例：

用户从首页跳转到订单页时，浏览器才动态下载订单页的 chunk。这就是“按房间分配行李”的工程实现——每个页面只携带自己的代码，其他代码安心躺在服务器里等待召唤。

const routes = [  { path: '/', component: () => import('./pages/Home.vue') },  { path: '/order', component: () => import('./pages/Order.vue') },  { path: '/me', component: () => import('./pages/Me.vue') }];

预取预加载：提前放在门口

上班前知道今天要带文件，昨晚就把文件放进包里、放在门口，出门时顺手拿走，一秒不耽误。这就是预取的智慧。懒加载解决了“暂时不需要”的问题，但有些资源用户“马上可能需要”——等用户点击了才开始下载，还是会有一段白屏等待。

prefetch 会在浏览器空闲时预先下载未来可能用到的 chunk；preload 则立即加载当前页面即将使用的关键资源。Webpack 用一行魔法注释开启：

prefetch 的 chunk 在主资源加载完毕后、浏览器空闲时静默下载，不抢占首屏带宽；preload 的 chunk 与父 chunk 并行加载，优先级更高。用户感知到的等待时间可以用公式刻画：

放在门口的文件，出门时直接拿走，一分一秒都不等。prefetch 就是那个“提前放门口”的帮手——它不抢首屏资源，只在空闲时默默准备，把未来的等待悄悄抹平。

import(/* webpackPrefetch: true */ './pages/Order.vue');import(/* webpackPreload: true */ './components/Modal.vue');

粒度权衡优化：箱子大小有学问

箱子分得太细，100 个小箱子搬运时容易丢还累人；箱子太少太大，搬起来费劲。搬家师傅会根据物品的贵重程度与使用频率权衡箱子配置。代码分割同样讲究“粒度”：粒度太细，chunk 数量爆炸，HTTP 请求过多，浏览器缓存容易失效；粒度太粗，单个 chunk 过大，首屏依旧缓慢。

衡量分割效果的核心指标是缓存命中率。假设 $S_{stable}$ 是长时间不变化的模块体积（第三方库、公共工具），$S_{total}$ 是所有 chunk 的体积和，则缓存命中率公式如下：

配置实践上：给第三方库设置较大的 minSize（比如 30KB），避免小库被反复提取；业务代码设置较小 minSize，保持独立性；chunk 文件用 contenthash 命名，内容不变文件名就不变，缓存长期有效。最优的搬家方案，就是让常动的物品进小箱子、不动的物品进大箱子——稳定代码长期命中缓存，易变代码小而精。

AI 应用场景

Python 演示

"""splitChunks 分割决策模拟器对比"全量打包"与"公共依赖提取 + 分包"的首屏体积差异"""  class Module:    """一个 JS 模块"""     def __init__(self, name: str, size: int, pages: list):        self.name = name        self.size = size          # 体积（KB）        self.pages = set(pages)   # 使用该模块的页面  class SplitChunksSimulator:    """模拟 splitChunks 的提取逻辑"""     def __init__(self, min_shared=2, min_size=30):        self.min_shared = min_shared  # 至少被几个页面共享才提取        self.min_size = min_size      # 低于该体积不提取     def extract_commons(self, modules):        """筛选出值得提取为公共 chunk 的模块"""        return [            mod for mod in modules            if len(mod.pages) >= self.min_shared and mod.size >= self.min_size        ]  def main():    modules = [        Module("react", 140, ["首页", "订单页", "个人页"]),        Module("axios", 28, ["首页", "订单页"]),        Module("utils", 45, ["首页", "订单页", "个人页"]),        Module("charts", 95, ["订单页", "个人页"]),        Module("home-banner", 60, ["首页"]),        Module("order-list", 80, ["订单页"]),        Module("user-info", 50, ["个人页"]),    ]     splitter = SplitChunksSimulator(min_shared=2, min_size=30)    commons = splitter.extract_commons(modules)    common_size = sum(m.size for m in commons)    common_names = {m.name for m in commons}     home_modules = [m for m in modules if "首页" in m.pages]    home_before = sum(m.size for m in home_modules)    home_private = [        m for m in home_modules if m.name not in common_names    ]    home_after = sum(m.size for m in home_private) + common_size     print("===== splitChunks 分割决策模拟 =====")    print(f"全站模块数：{len(modules)}，提取公共模块数：{len(commons)}")    print(f"公共 chunk：{', '.join(m.name for m in commons) or '无'}")    print(f"公共 chunk 体积：{common_size} KB")    print(f"首页分割前体积：{home_before} KB")    print(f"首页分割后体积：{home_after:.0f} KB")    print(f"首屏下降：{(1 - home_after / home_before) * 100:.1f}%")  if __name__ == "__main__":    main()

1. if len(mod.pages) >= self.min_shared and mod.size >= self.min_size:模块必须同时满足“被多个页面共享”和“体积够大”两个条件才值得提取，否则提取收益太低。
2. common_names = {m.name for m in commons}把公共模块名称放进集合，后续判断首页模块是否属于公共部分时，O(1) 即可完成查找。
3. home_private = [m for m in home_modules if m.name not in common_names]首页分割后只需加载自己独有的模块，公共模块统一从公共 chunk 获取。
4. home_after = sum(m.size for m in home_private) + common_size分割后的首页体积 = 首页独有模块体积 + 公共 chunk 体积，公共部分只下载一次。

常见误区

面试题