预加载指令的生成控制

性能优化 预加载指令的生成控制

Vite.js 在构建过程中会自动生成预加载指令，这些指令能够显著提升页面加载性能。通过合理控制这些指令的生成，开发者可以进一步优化应用性能，特别是在处理大型项目或复杂依赖关系时。

预加载指令的工作原理

Vite.js 使用 <link rel="modulepreload"> 指令来预加载关键模块。当浏览器解析 HTML 时，这些指令会提前请求并缓存模块，减少后续加载延迟。例如：

<link rel="modulepreload" href="/src/main.js" />
<link rel="modulepreload" href="/src/components/Header.vue" />

这种机制特别适用于依赖关系复杂的应用，能够显著减少瀑布式加载带来的性能问题。

配置预加载指令生成

Vite.js 提供了 build.rollupOptions.output.manualChunks 和 build.rollupOptions.output.inlineDynamicImports 等选项来控制代码分割和预加载行为。在 vite.config.js 中：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules/lodash')) {
            return 'lodash'
          }
          if (id.includes('node_modules/axios')) {
            return 'axios'
          }
        }
      }
    }
  }
}

自定义预加载策略

对于需要更精细控制的场景，可以使用 build.rollupOptions.output.entryFileNames 和 build.rollupOptions.output.chunkFileNames 来调整输出文件名，进而影响预加载行为：

export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name]-[hash].js',
        chunkFileNames: 'assets/chunks/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    }
  }
}

禁用特定模块的预加载

某些情况下，预加载可能不适用于所有模块。可以通过 build.rollupOptions.output.experimentalPreload 配置禁用特定模块的预加载：

export default {
  build: {
    rollupOptions: {
      output: {
        experimentalPreload: {
          exclude: (chunkInfo) => {
            return chunkInfo.name.includes('lazy-loaded')
          }
        }
      }
    }
  }
}

动态导入与预加载的协同

动态导入(import())与预加载指令可以协同工作。Vite.js 会自动为动态导入的模块生成预加载指令，但可以通过注释控制：

// 禁用特定动态导入的预加载
const module = await import(
  /* webpackIgnore: true */
  './lazy-module.js'
)

预加载关键CSS资源

除了JavaScript模块，CSS资源的预加载同样重要。Vite.js 会自动为关键CSS生成预加载指令：

<link rel="preload" href="/assets/style.css" as="style" />

可以通过配置调整这一行为：

export default {
  build: {
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.name.endsWith('.css')) {
            return 'assets/css/[name]-[hash][extname]'
          }
          return 'assets/[name]-[hash][extname]'
        }
      }
    }
  }
}

预加载指令的性能影响评估

预加载指令虽然能提升性能，但过度使用可能导致网络拥塞。可以使用Chrome DevTools的Performance面板评估预加载效果：

1. 记录页面加载过程
2. 分析关键请求路径
3. 检查预加载指令是否按预期工作
4. 调整配置优化关键路径

高级配置：自定义预加载函数

对于需要完全控制预加载逻辑的场景，可以实现自定义预加载函数：

export default {
  build: {
    rollupOptions: {
      output: {
        experimentalPreload: {
          map: (chunkInfo) => {
            if (chunkInfo.isEntry) {
              return { files: [chunkInfo.fileName], type: 'module' }
            }
            return null
          }
        }
      }
    }
  }
}

预加载与HTTP/2的协同优化

在HTTP/2环境下，预加载策略可以更加激进，因为HTTP/2的多路复用特性减少了连接开销：

export default {
  server: {
    http2: true,
    headers: {
      'Link': [
        '</assets/main.js>; rel=preload; as=script',
        '</assets/main.css>; rel=preload; as=style'
      ]
    }
  }
}

预加载指令的缓存策略

合理的缓存策略能最大化预加载效果。配置 Cache-Control 头确保预加载资源被正确缓存：

export default {
  server: {
    headers: {
      'Cache-Control': 'public, max-age=31536000, immutable'
    }
  }
}

预加载指令的优先级控制

通过 as 属性可以指定资源类型，帮助浏览器确定加载优先级：

<link rel="preload" href="/assets/font.woff2" as="font" type="font/woff2" crossorigin>

在Vite配置中，可以通过插件自动添加这些属性：

import { createHtmlPlugin } from 'vite-plugin-html'

export default {
  plugins: [
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          preloadLinks: generatePreloadLinks() // 自定义生成函数
        }
      }
    })
  ]
}

预加载指令的跨域考虑

对于跨域资源，必须正确设置 crossorigin 属性：

<link rel="preload" href="https://cdn.example.com/lib.js" as="script" crossorigin>

在Vite配置中确保CDN资源被正确处理：

export default {
  build: {
    assetsInlineLimit: 0,
    rollupOptions: {
      external: ['https://cdn.example.com/lib.js']
    }
  }
}

预加载指令的调试技巧

调试预加载行为时，可以使用以下方法：

1. 在Chrome DevTools的Network面板中过滤preload请求
2. 使用performance.getEntriesByType('resource')API获取预加载资源信息
3. 检查控制台警告信息，识别预加载问题

// 在控制台检查预加载资源
performance.getEntriesByType('resource')
  .filter(entry => entry.initiatorType === 'link' && entry.name.includes('.js'))
  .forEach(entry => console.log(entry))

预加载指令与Service Worker的集成

Service Worker可以进一步增强预加载效果，实现更精细的资源缓存策略：

// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('preload-cache').then((cache) => {
      return cache.addAll([
        '/assets/main.js',
        '/assets/main.css'
      ])
    })
  )
})

在Vite配置中注册Service Worker：

import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html}']
      }
    })
  ]
}