Vue-cli 打包优化之 Preload 和 Prefetch 应该如何使用

Preload 和 Prefetch 都是 HTML 的预连接资源提示,它们会提前让浏览器知道某些资源即将被使用,从而让浏览器提前请求和加载这些资源,提高页面加载速度。但它们在应用场景和优先级上有所不同:

• Preload: 用于声明页面主要需要的关键资源,通常是首屏所需的 CSS、JavaScript 等文件。浏览器会在 HTML 解析之前加载这些资源,优先级较高,适用于关键资源。
• Prefetch: 用于声明页面可能需要的资源,比如下一个页面可能需要的资源。浏览器会在空闲时间加载这些资源,优先级较低,适用于非关键资源。

在 Vue-cli 中,我们可以通过 chainWebpack 配置来使用 Preload 和 Prefetch。我们需要在 vue.config.js 文件中添加以下配置:

module.exports = {
  chainWebpack: config => {
    // Preload
    config.plugin('preload').use(WebpackPreloadPlugin, [{
      rel: 'preload',
      include: 'initial',
      fileBlacklist: [/\.map$/, /hot-update\.js$/]
    }]);

    // Prefetch
    config.plugin('prefetch').use(WebpackPrefetchPlugin, [{
      rel: 'prefetch',
      include: 'asyncChunks'
    }]);
  }
}

这里我们使用 WebpackPreloadPlugin 和 WebpackPrefetchPlugin 这两个插件来实现 Preload 和 Prefetch 功能。

Preload 配置

• rel: 'preload': 指定 preload 的资源类型。
• include: 'initial': 只对初始化时加载的资源进行 preload。
• fileBlacklist: [/\.map$/, /hot-update\.js$/]: 排除 sourceMap 和 热更新文件。

Prefetch 配置

• rel: 'prefetch': 指定 prefetch 的资源类型。
• include: 'asyncChunks': 只对异步加载的资源进行 prefetch。

通过这些配置,Vue-cli 会自动在 HTML 中添加相应的 preload 和 prefetch 标签,帮助浏览器提前加载这些资源。

在使用 Preload 和 Prefetch 时,需要注意以下几点:

• Preload 用于加载首屏所需的关键资源,Prefetch 用于加载非关键资源。两者应该根据实际需求进行合理搭配。
• Preload 会在 HTML 解析前加载资源,会占用带宽和网络请求,应该谨慎使用,只 preload 关键资源。
• Prefetch 会在浏览器空闲时加载资源,不会影响首屏加载,但也需要根据实际情况进行配置,不要过度 prefetch。
• 注意 Preload 和 Prefetch 的文件路径和文件名,要与实际打包后的资源路径和文件名一致,否则可能无法正常加载。

合理使用 Preload 和 Prefetch 可以大幅提高 Vue.js 应用程序的首屏加载速度和整体性能,值得我们仔细研究和实践。