1. Webpack 中的预加载和预获取
Webpack 提供了两种注释：
/* webpackPreload: true */：用于预加载当前页面需要的关键资源。/* webpackPrefetch: true */：用于预获取未来可能用到的资源（如下一个页面的资源）。
2. 如何使用注释实现预加载
(1) 预加载关键资源
使用 /* webpackPreload: true */ 注释，告诉 Webpack 预加载某个模块。
示例：预加载关键组件
const PreloadedComponent = import(
/* webpackPreload: true */
'./PreloadedComponent.vue'
);示例：在路由配置中使用预加载
{
path: '/preload',
component: () => import(
/* webpackPreload: true */
'./views/PreloadPage.vue'
),
}(2) 预获取未来资源
使用 /* webpackPrefetch: true */ 注释，告诉 Webpack 预获取某个模块。
示例：预获取未来页面
const PrefetchedComponent = import(
/* webpackPrefetch: true */
'./PrefetchedComponent.vue'
);示例：在路由配置中使用预获取
{
path: '/prefetch',
component: () => import(
/* webpackPrefetch: true */
'./views/PrefetchPage.vue'
),
}3. Webpack 预加载和预获取的工作原理
(1) 预加载（Preload）
- 加载时机：立即加载，优先级较高。
- 适用场景：当前页面需要的关键资源。
- 行为：Webpack 会生成
<link rel="preload">标签，浏览器会立即加载这些资源。
(2) 预获取（Prefetch）
- 加载时机：浏览器空闲时加载，优先级较低。
- 适用场景：未来可能用到的资源（如下一个页面的资源）。
- 行为：Webpack 会生成
<link rel="prefetch">标签，浏览器会在空闲时加载这些资源。
4. 示例：在 Vue 路由中使用预加载和预获取
以下是一个完整的 Vue 路由配置示例，结合了预加载和预获取：
const routes = [
{
path: '/',
component: () => import(
/* webpackPreload: true */
'./views/Home.vue'
),
},
{
path: '/about',
component: () => import(
/* webpackPrefetch: true */
'./views/About.vue'
),
},
{
path: '/contact',
component: () => import(
/* webpackPrefetch: true */
'./views/Contact.vue'
),
},
];解释：
Home.vue：使用webpackPreload，因为它是首屏页面，需要立即加载。About.vue和Contact.vue：使用webpackPrefetch，因为它们是用户可能访问的下一个页面。
5. 如何检查预加载和预获取是否生效
(1) 使用 Chrome DevTools
- 打开 Chrome DevTools，切换到 Network 选项卡。
- 刷新页面，查看是否有
<link rel="preload">或<link rel="prefetch">标签。 - 检查资源的加载顺序和优先级。
(2) 查看打包结果
- 运行
npm run build，查看生成的 HTML 文件。 - 检查是否有类似以下的标签：
<link rel="preload" href="/static/js/Home.1234.js" as="script">
<link rel="prefetch" href="/static/js/About.5678.js" as="script">(3) 使用 Webpack Bundle Analyzer
- 使用
webpack-bundle-analyzer分析打包结果，查看预加载和预获取的模块是否被正确拆分。
6. 注意事项
- 不要滥用预加载和预获取：
- 预加载会立即加载资源，可能会影响当前页面的性能。
- 预获取会在浏览器空闲时加载资源，但如果预获取的资源过多，可能会占用带宽。
- 结合用户行为：
- 例如，在用户 hover 到某个链接时，动态触发预获取。
示例：动态触发预获取
const link = document.querySelector('a[href="/about"]');
link.addEventListener('mouseover', () => {
import(
/* webpackPrefetch: true */
'./views/About.vue'
);
});7. 总结
- Webpack 支持通过注释实现预加载和预获取：
/* webpackPreload: true */：预加载关键资源。/* webpackPrefetch: true */：预获取未来资源。
- 适用场景：
- 预加载：当前页面需要的关键资源。
- 预获取：用户可能访问的下一个页面的资源。
- 检查方法：
- 使用 Chrome DevTools 查看网络请求。
- 查看打包生成的 HTML 文件。
