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 文件。