zin-plugin-preload

zin-plugin-preload

Vite插件，为Vue3项目提供全面的资源连接预加载功能，优化应用性能和加载速度。

功能特点

• DNS预解析 (dns-prefetch)：提前解析域名，减少DNS查询延迟
• 预连接 (preconnect)：提前建立连接，减少后续请求的延迟
• 资源预加载 (preload)：提前加载关键资源，避免渲染阻塞
• 资源预取 (prefetch)：提前获取可能需要的资源，提升用户体验
• 智能配置：支持自动扫描和手动配置相结合的方式
• 灵活控制：提供精细的资源类型控制和排除机制

安装

使用npm安装：

npm install zin-plugin-preload --save-dev

使用yarn安装：

yarn add zin-plugin-preload -D

使用pnpm安装：

pnpm add zin-plugin-preload -D

基本使用

在Vite配置文件中添加插件：

// vite.config.js
import { defineConfig } from 'vite'
import VuePreloadPlugin from 'zin-plugin-preload'

export default defineConfig({
  plugins: [
    VuePreloadPlugin() // 使用默认配置
  ]
})

高级配置

自定义预加载域名和资源

// vite.config.js
import { defineConfig } from 'vite'
import VuePreloadPlugin from 'zin-plugin-preload'

export default defineConfig({
  plugins: [
    VuePreloadPlugin({
      // 自动扫描设置
      autoScan: true,
      scanFilePatterns: ['**/*.vue', '**/*.js', '**/*.ts'],
      
      // DNS预解析配置
      dnsPrefetch: {
        enabled: true,
        domains: [
          'https://api.example.com',
          'https://cdn.example.com'
        ],
        excludeDomains: [
          'https://low-priority.example.com'
        ]
      },
      
      // 预连接配置
      preconnect: {
        enabled: true,
        domains: [
          'https://api.example.com',
          'https://cdn.example.com'
        ],
        excludeDomains: []
      },
      
      // 资源预加载配置
      preload: {
        enabled: true,
        resources: [
          'https://cdn.example.com/fonts/main.woff2',
          'https://cdn.example.com/images/logo.png'
        ],
        excludeResources: [],
        types: ['font', 'image', 'script', 'style']
      },
      
      // 资源预取配置
      prefetch: {
        enabled: true,
        resources: [
          'https://cdn.example.com/js/lazy-module.js'
        ],
        excludeResources: [],
        types: ['font', 'image', 'script', 'style'],
        limit: 10 // 限制预取资源数量
      },
      
      // 调试模式
      debug: false
    })
  ]
})

配置选项详解

基础配置

• autoScan: 布尔值，是否自动扫描项目文件中的URL
• scanFilePatterns: 数组，自动扫描的文件匹配模式
• debug: 布尔值，是否开启调试模式

DNS预解析配置 (dnsPrefetch)

• enabled: 布尔值，是否启用DNS预解析
• domains: 数组，手动指定需要预解析的域名列表
• excludeDomains: 数组，排除不需要预解析的域名列表

预连接配置 (preconnect)

• enabled: 布尔值，是否启用预连接
• domains: 数组，手动指定需要预连接的域名列表
• excludeDomains: 数组，排除不需要预连接的域名列表

资源预加载配置 (preload)

• enabled: 布尔值，是否启用资源预加载
• resources: 数组，手动指定需要预加载的资源URL列表
• excludeResources: 数组，排除不需要预加载的资源URL列表
• types: 数组，预加载的资源类型，可选值：'font', 'image', 'script', 'style'

资源预取配置 (prefetch)

• enabled: 布尔值，是否启用资源预取
• resources: 数组，手动指定需要预取的资源URL列表
• excludeResources: 数组，排除不需要预取的资源URL列表
• types: 数组，预取的资源类型，可选值：'font', 'image', 'script', 'style'
• limit: 数字，最多预取的资源数量，避免过度预取

最佳实践

推荐配置

对于一般的Vue3项目，推荐以下配置：

VuePreloadPlugin({
  dnsPrefetch: {
    enabled: true,
    // 添加常用的第三方域名
    domains: [
      'https://fonts.googleapis.com',
      'https://fonts.gstatic.com',
      'https://cdn.jsdelivr.net'
    ]
  },
  preconnect: {
    enabled: true,
    // 仅对核心API域名进行预连接
    domains: [
      'https://api.example.com'
    ]
  },
  preload: {
    enabled: true,
    // 预加载关键字体和样式
    resources: [
      '/fonts/main.woff2'
    ],
    types: ['font']
  },
  prefetch: {
    enabled: true,
    limit: 5 // 限制预取资源数量
  }
})

性能优化建议

• 合理使用preconnect：仅对重要的跨域资源使用preconnect，过多会消耗资源
• 谨慎使用preload：只预加载首屏必需的关键资源，过度使用会增加带宽消耗
• 按需使用prefetch：根据用户可能的导航路径预取资源，预测性加载
• 排除内部资源：本地资源不需要进行DNS预解析和预连接
• 注意缓存策略：确保预加载的资源有合理的缓存策略

常见问题

预加载标签没有生效？

检查以下几点：

• 确保插件正确安装并在vite.config.js中配置
• 查看浏览器控制台是否有错误信息
• 启用debug模式检查插件是否正常工作
• 确认HTML文件中有head标签

如何判断预加载是否有效？

可以通过浏览器开发者工具的Network面板查看：

• DNS预解析：查看domainLookupStart时间是否提前
• 预连接：查看connectStart时间是否提前
• 预加载/预取：查看资源的加载时间线

许可证

MIT License