perf:首屏加载屏蔽vue-plugin-hiprint

main
黄伟杰 18 hours ago
parent 226bf18ddb
commit a41d851aaa

@ -42,28 +42,6 @@ import Logger from '@/utils/Logger'
import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
// 空闲时静默加载打印插件vue-plugin-hiprint 体积较大且内含 jQuery
// 等浏览器空闲后再动态加载,避免与首屏关键请求争抢连接/带宽而拖慢首屏。
const setupHiprintWhenIdle = (app: ReturnType<typeof createApp>) => {
const load = () => {
import('vue-plugin-hiprint')
.then(({ hiPrintPlugin }) => {
app.use(hiPrintPlugin, '$hiprint', false)
hiPrintPlugin.disAutoConnect()
})
.catch((e) => {
console.error('[hiprint] 打印插件加载失败:', e)
})
}
// 优先使用 requestIdleCallback在浏览器空闲时加载不支持则延迟兜底
const ric = (window as any).requestIdleCallback
if (typeof ric === 'function') {
ric(load, { timeout: 50000 })
} else {
setTimeout(load, 30000)
}
}
// 创建实例
const setupAll = async () => {
const app = createApp(App)
@ -89,9 +67,6 @@ const setupAll = async () => {
app.use(VueDOMPurifyHTML)
app.mount('#app')
// 首屏渲染后,等浏览器空闲再静默加载打印插件
setupHiprintWhenIdle(app)
}
setupAll()

@ -79,13 +79,6 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
// brotliSize: false,
// 提高 chunk 体积告警阈值,避免大量无意义警告
chunkSizeWarningLimit: 2000,
// 控制 index.html 中注入的 modulepreload 预加载链接,
// 剔除 hiprint 等按需异步加载的大 chunk避免其在首屏被抢先预加载而阻塞
modulePreload: {
resolveDependencies: (_filename, deps) => {
return deps.filter((dep) => !dep.includes('hiprint'))
}
},
rollupOptions: {
output: {
// 将体积较大的第三方依赖拆分为独立 chunk避免全部打进入口主 chunk 导致首屏阻塞

Loading…
Cancel
Save