Awesome

vite-plugin-magic-preloader

English | 中文

Rollup/Vite does not provide Magic Comments like /* vitePrefetch: true */ or /* vitePreload: true */, but there are scenarios where we need resource preloading.

[!TIP] This only works within import() statements.

Installation

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

Usage

• Configure the plugin in vite.config.ts

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

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

Options

include

Specifies the dependencies to process. It supports string, regular expression, and array types. By default, only js, ts, jsx, tsx files that are not in node_modules are processed.

Files that are matched will be parsed as JavaScript code. Please ensure that the content of these files can be correctly parsed into an AST Tree.

exclude

Specifies the dependencies to exclude. It supports string, regular expression, and array types.

Example

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

If you need this plugin to work within Vue SFC, make sure that vite-plugin-magic-preloader is loaded after the @vitejs/plugin-vue plugin.

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

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