npmpackage.info

Gathering detailed insights and metrics for vite-plugin-custom-preload

Other packages similar to vite-plugin-custom-preload

vite-plugin-preload-image-custom

1.0.1

vite 插件，用于在页面加载时预加载图片

vite-plugin-preload-image

0.2.1

The Vite Image Preloader Plugin helps optimize web performance by preloading critical images during the build process. It integrates seamlessly with Vite and supports custom configurations for image types and directories.

Gathering detailed insights and metrics for vite-plugin-custom-preload

vite-plugin-custom-preload - 1.0.7 | npmpackage.info

vite-plugin-custom-preload

1.0.7

6.90 kB

Installations

npm install vite-plugin-custom-preload

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.15.1

NPM Version

10.7.0 Releases

Unable to fetch releases

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

Maintainers

Package Meta Information

Latest Version

1.0.7

Package Id

vite-plugin-custom-preload@1.0.7

Unpacked Size

6.90 kB

Size

2.74 kB

File Count

NPM Version

10.7.0

Node Version

20.15.1

Published on

Jul 11, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

vite

Dev Dependencies

rollup typescript vite @types/node

vite-plugin-custom-preload

一个用于 Vite 的插件，可自定义将 preload/prefetch 资源注入到 index.html，支持 JS、CSS、图片等静态资源。

特性

支持自定义哪些 chunk 需要插入 <link rel="preload"> 或 <link rel="prefetch">
支持自定义 link 的所有属性
支持插入到 <head> 或 <body> 位置
支持 JS、CSS、图片等资源类型

安装

1npm install vite-plugin-custom-preload --save-dev
2# 或
3pnpm add vite-plugin-custom-preload -D

使用

在 vite.config.ts 中引入并配置插件：

1import customPreloadPlugin from 'vite-plugin-custom-preload';
2
3export default {
4  plugins: [
5    customPreloadPlugin({
6      shouldPreload: (chunk) => {
7        // 只处理入口 JS、所有 CSS 和 png 图片
8        if (chunk.type === 'chunk' && chunk.fileName.endsWith('.js')) return true;
9        if (chunk.type === 'asset' && chunk.fileName.endsWith('.css')) return true;
10        if (chunk.type === 'asset' && chunk.fileName.endsWith('.png'))
11          return { as: 'image', type: 'image/png' };
12        return false;
13      },
14      rel: 'preload', // 或 'prefetch'
15      position: 'head', // 或 'body'
16    }),
17  ],
18};

配置项

选项	类型	说明	默认值
shouldPreload	(chunk) => boolean \| LinkAttributes	控制每个 chunk 是否插入及插入属性，返回 true/false 或属性对象	入口 chunk
rel	'preload' \| 'prefetch'	link 的 rel 属性	preload
position	'head' \| 'body'	插入到 `<head>` 还是 `<body>`	head

shouldPreload

返回 false：不插入
返回 true：使用默认属性插入
返回属性对象：合并默认属性和自定义属性

License

ISC

Other packages similar to vite-plugin-custom-preload

Other packages similar to vite-plugin-custom-preload

vite-plugin-custom-preload

Installations

Developer Guide

Yes

ESM

20.15.1

10.7.0

Releases

Unable to fetch releases

Download Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

vite-plugin-custom-preload

特性

安装

使用

配置项

shouldPreload

License

相关链接