48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import type { Plugin } from 'vite';
|
|
|
|
/**
|
|
* Vite 插件：资源预加载优化
|
|
* 自动添加 Link 标签预加载关键资源
|
|
*/
|
|
export default function preloadPlugin(): Plugin {
|
|
return {
|
|
name: 'vite-plugin-preload-optimization',
|
|
apply: 'build',
|
|
transformIndexHtml(html, context) {
|
|
// 只在生产环境添加预加载
|
|
if (process.env.NODE_ENV === 'development') {
|
|
return html;
|
|
}
|
|
|
|
const bundle = context.bundle || {};
|
|
const preloadLinks: string[] = [];
|
|
|
|
// 收集关键资源
|
|
const criticalChunks = ['vue-vendor', 'element-plus', 'pinia'];
|
|
const criticalAssets: string[] = [];
|
|
|
|
Object.entries(bundle).forEach(([fileName, chunk]) => {
|
|
if (chunk.type === 'chunk' && criticalChunks.some(name => fileName.includes(name))) {
|
|
criticalAssets.push(`/${fileName}`);
|
|
}
|
|
});
|
|
|
|
// 生成预加载标签
|
|
criticalAssets.forEach(href => {
|
|
if (href.endsWith('.js')) {
|
|
preloadLinks.push(`<link rel="modulepreload" href="${href}" crossorigin>`);
|
|
} else if (href.endsWith('.css')) {
|
|
preloadLinks.push(`<link rel="preload" href="${href}" as="style">`);
|
|
}
|
|
});
|
|
|
|
// 将预加载标签插入到 </head> 之前
|
|
if (preloadLinks.length > 0) {
|
|
return html.replace('</head>', `${preloadLinks.join('\n ')}\n</head>`);
|
|
}
|
|
|
|
return html;
|
|
},
|
|
};
|
|
}
|