vite-plugin-magic-preloader

中文 | English

Rollup/Vite 没有提供类似 /* vitePrefetch: true */ 或 /* vitePreload: true */ 的 Magic Comments, 但我们确实需要针对某些场景进行资源预加载

安装

# yarn
yarn add vite-plugin-magic-preloader -D
# npm
npm install vite-plugin-magic-preloader -D
# pnpm
pnpm add vite-plugin-magic-preloader -D

使用

• vite.config.ts 中配置插件

import magicPreloader from 'vite-plugin-magic-preloader';

export default defineConfig({
  plugins: [magicPreloader()],
});

选项

参数	类型	默认值	说明
include	string | RegExp | ReadonlyArray<string | RegExp> | null	/\.(js|ts|jsx|tsx)$/	需要处理的文件
exclude	string | RegExp | ReadonlyArray<string | RegExp> | null	/node_modules/	排除的文件
attrs	Record<string, string | boolean> | ((href: string) => Record<string, string | boolean>)	{ crossorigin: true }	link标签属性

include

需要处理的依赖项，支持字符串、正则表达式、数组类型。默认情况下只处理不在 node_modules 中的 js, ts, jsx, tsx 文件

被命中的文件将会被当作 JavaScript 代码解析，请确保文件内容能被正确解析为 Abstract Syntax Tree

exclude

排除的依赖项，支持字符串、正则表达式、数组类型

示例

const router = [
  {
    path: '/',
    component: () => import(/* vitePrefetch: true */ './views/Home.vue'),
  },
  {
    path: '/about',
    component: () => import(/* vitePreload: true */ './views/About.vue'),
  },
];

若需要在 Vue 单文件组件中也使插件生效，请确保 vite-plugin-magic-preloader 在 @vitejs/plugin-vue 插件之后加载

import vue from '@vitejs/plugin-vue';
import magicPreloader from 'vite-plugin-magic-preloader';

export default defineConfig({
  plugins: [vue(), magicPreloader()],
});

基础示例可以参考 这个链接

贡献者