在打包构建领域，资源加载策略一直是性能优化的重点。Webpack 5 对 Resource Hints 的支持做了系统性升级，开发者不再需要手动在 HTML 模板里维护一堆 link 标签，而是可以在代码层面直接声明某个模块需要被预加载或预获取，构建工具会自动把对应的提示注入到产物中。这篇文章就来聊聊这套机制的原理、用法和常见的坑。
什么是 Resource Hints，preload 和 prefetch 到底差在哪
Resource Hints 是浏览器提供的一组资源加载提示机制，最常用的就是 preload 和 prefetch，它们都通过 HTML 中的 <link> 标签告诉浏览器提前去下载资源。但两者在时机、优先级和适用场景上有本质区别。
preload 表示当前导航一定会用到这个资源，浏览器会以较高优先级立即下载，典型场景是首屏关键字体、关键 CSS 或者即将执行的入口脚本。prefetch 则表示未来可能用到，浏览器会在空闲时段以 Lowest 优先级悄悄下载并缓存，等用户真正跳转或触发交互时直接命中缓存，典型场景是下一个路由页面的 chunk。
用一句通俗的话总结：preload 是马上要用的东西提前拿，prefetch 是待会儿可能用的东西先囤着。两者的误用会带来实际问题，比如把首屏资源标成 prefetch 会导致加载变慢，把低频页面全部标成 preload 则会抢占关键资源的带宽。
Webpack 5 中声明资源提示的两种方式
Webpack 5 内置了资源提示能力，最常用的方式是在动态导入时添加魔法注释。在 import() 表达式前加上 /* webpackPrefetch: true */ 或 /* webpackPreload: true */，Webpack 就会在构建时把对应 chunk 的提示注入到产物里。
// 声明预获取：登录页可能在用户点击时才需要 import(/* webpackPrefetch: true */ './LoginModal'); // 声明预加载：首屏渲染必定依赖图表库 import(/* webpackPreload: true */ './charts/InitChart');
构建完成后，Webpack 会在页面运行时通过 <link rel="prefetch"> 或 <link rel="preload"> 动态插入提示。注意这里和旧版本的做法不同，Webpack 5 默认不直接把 link 写进 HTML，而是把提示信息编译进 runtime 代码，由 runtime 在父 chunk 加载完成后插入，这样能保证顺序正确、避免死链。
第二种方式是通过 output.dependencyHelpers 相关配置和 SplitChunksPlugin 配合，为公共依赖自动附加提示。此外 Webpack 5 还引入了 webpackRuntimeModule 级别的 preload 行为：当一个异步模块被预加载时，它的所有依赖 chunk 会通过 <link rel="preload"> 一并提前下载，这就是官方文档里说的 runtime 自动预加载异步依赖。
进阶玩法：异步依赖的自动预加载
Webpack 5 最值得称道的一点，是 webpackPreload 标记的异步 chunk 会连带其依赖树一起被处理。假设你的图表模块依赖了一个体积不小的渲染引擎，标记 preload 后，渲染引擎所在的 chunk 也会一起被预加载，而不是等图表模块执行时才发现依赖缺失再发起请求。
// ChartPanel 依赖 d3-core chunk // 标记 preload 后，d3-core 会被一并预加载 import(/* webpackPreload: true */ './ChartPanel');
如果想排除某些不希望被预加载的模块，可以在魔法注释里追加排除项，例如 /* webpackPreload: true, webpackExclude: /huge-lib/ */，这样匹配到的依赖不会生成提示。这在依赖体积差异很大的项目里非常实用，可以精确控制哪些内容值得提前下载。
另一个技巧是结合 SplitChunksPlugin 的 chunks: 'all' 使用。把公共依赖抽成独立 chunk 后，多个入口的 preload 提示可以复用同一个 chunk，避免重复下载。配合 cacheGroups 定制分组，可以让预加载的资源粒度更细、命中率更高。
常见坑与最佳实践
第一个坑是无差别地给所有动态导入加 prefetch。这样做看似稳妥，实际上移动端用户可能在预取发起后就离开了页面，白白消耗流量。建议只对转化路径上的下一页做 prefetch，比如列表页预取详情页、登录页预取首页。
第二个坑是 preload 使用过度导致优先级混乱。浏览器的预加载器对资源有严格的优先级排序，大量 preload 会把关键 CSS 和字体挤到后面，反而拖慢首屏。一个实用原则是：preload 只给首屏必须的异步 chunk 和字体，数量控制在个位数。
第三个坑是缓存失效问题。资源提示针对的是具体 URL，Webpack 5 的 contenthash 文件名机制能保证提示指向的永远是最新构建产物，这也是为什么推荐用构建工具管理提示而不是手写 HTML——手写的 link 在文件名变化后会直接 404。同时建议开启 HTTP/2，让多个 preload 请求复用连接，避免队头阻塞抵消收益。
最后，验证资源提示是否生效可以通过 Chrome DevTools 的 Network 面板，观察 prefetch 请求是否在空闲时段发起、preload 请求的 Priority 列是否为 High。配合 Lighthouse 的机会报告，就能量化这套机制带来的实际收益。掌握好这些细节，Webpack 5 的 Resource Hints 才能真正成为性能优化的利器而不是带宽杀手。
Webpack 5Resource Hints模块联邦修改时间：2026-09-13 07:12:25