之前分享一篇关于如何开发一个图片预加载插件的文章，当时只开发了webpack版，缺少了vite版。后来有时间就补上了这块，并且发布了一个npm包，方便之后直接安装下载使用。

介绍一下这npm包

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

npm 安装插件

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

配置选项

1. strategy：预加载策略，可以是 'preload' 或 'prefetch'。
2. 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 标签

1. 对于 preload 策略

2. 对于 prefetch 策略

注意事项

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