Webpack Images Preload Plugin And Vite Images Preload Plugin

Images Preload Plugin 是一个用于在 Webpack 或者 Vite 构建过程中自动预加载或预获取图片资源的插件。通过配置不同的策略，可以在 HTML 文件中生成相应的 <link> 标签，以优化图片资源的加载性能。

安装

使用 npm 安装插件：

npm install images-preload-plugins --save-dev

使用方法

插件支持以下配置选项：

• strategy：预加载策略，可以是 'preload' 或 'prefetch'。
• assetDir：图片资源所在的目录路径。

插件导入

// webpack.config.js
import WebpackPreloadImagesPlugin from  'images-preload-plugins/webpack';

// vite.config.js
import VitePreloadImagesPlugin from 'images-preload-plugins/vite';

示例1

// webpack.config.js
module.exports = {
  // ...其他配置
  plugins: [
    new WebpackPreloadImagesPlugin([
      { strategy: 'preload', assetDir: 'src/assets/preload' },
      { strategy: 'prefetch', assetDir: 'src/assets/prefetch' },
    ]),
  ],
};

// vite.config.js
module.exports = defineConfig({
  // ...其他配置
  plugins: [
    VitePreloadImagesPlugin([
      { strategy: 'preload', assetDir: 'src/assets/preload' },
      { strategy: 'prefetch', assetDir: 'src/assets/prefetch' },
    ]),
  ],
});

示例2

// options {}
// webpack.config.js
module.exports = {
  //...其他配置
  plugins: [
    new WebpackPreloadImagesPlugin({
      strategy: 'preload',
      assetDir:'src/assets/preload'
    }),
  ],
};

// vite.config.js
module.exports = defineConfig({
  // ...其他配置
  plugins: [
    VitePreloadImagesPlugin({
      strategy: 'preload',
      assetDir:'src/assets/preload'
    }),
  ],
});

生成的 HTML 标签

• 对于 preload 策略

<link rel="preload" as="image" href="path/to/image.jpg">

• 对于 prefetch 策略

<link rel="prefetch" as="image" href="path/to/image.jpg">

注意事项

• 确保 assetDir 路径正确，否则插件可能无法找到图片资源。
• 如果使用的是私有 npm 仓库，确保你有正确的访问权限。

贡献

欢迎贡献代码或提出问题！请在 GitHub 上提交 Pull Request 或 Issue。