核心内容摘要
UsbDk实战指南：Windows USB设备直连开发全流程解析
前言在构建大型单页应用SPA时JavaScript 包体积Bundle Size往往会随着业务增长而膨胀导致首屏加载缓慢、白屏时间长。
懒加载Lazy Loading是解决这一问题的核心方案。
其本质是将代码分割成多个小的 chunk仅在需要时才从服务器下载。
路由懒加载按需拆分页面
为什么需要路由懒加载如果不使用懒加载所有路由对应的组件都会被打包进同一个app.js中。
用户访问首页时浏览器不得不下载整个应用的逻辑造成严重的性能浪费。
实现方式ESimport()利用动态导入语法打包工具如 Vite 或 Webpack会自动进行代码分割Code Splitting。
// router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from vue-router; // 静态导入会随着主包一起加载适合首页 import Home from /views/Home.vue; const routes: ArrayRouteRecordRaw [ { path: /, name: Home, component: Home }, { path: /about, name: About, // 动态导入只有访问 /about 路径时浏览器才会请求该组件对应的 JS 文件 component: () import(/views/About.vue) } ]; const router createRouter({ history: createWebHistory(), routes }); export default router;
组件懒加载细粒度控制有些组件如弹窗、复杂的图表、第三方重型库并不需要在页面初次渲染时立即存在。
Vue 3 的defineAsyncComponent在 Vue 3 中异步组件必须使用defineAsyncComponent进行显式声明。
示例template div h1主页面/h1 button clickshowChart true加载并显示报表/button AsyncChart v-ifshowChart / /div /template script setup langts import { ref, defineAsyncComponent } from vue; const showChart refboolean(false); // 显式定义异步组件 const AsyncChart defineAsyncComponent(() import(/components/BigChart.vue) ); // 高级配置可选带加载状态 const AsyncComponentWithConfig defineAsyncComponent({ loader: () import(./components/MyComponent.vue), loadingComponent: LoadingComponent, // 加载过程中显示的组件 errorComponent: ErrorComponent, // 加载失败时显示的组件 delay: 200, // 展示加载组件前的延迟时间 timeout: 3000 // 超时时间 }); /script
Vue 2 中直接使用import函数声明异步组件export default { components: { // 定义一个异步组件 MyLazyComponent: () import(./components/MyLazyComponent.vue) } }
底层原理与分包策略
打包工具的配合当你使用import()时Vite/Rollup会自动将该组件及其依赖提取到一个独立的.js文件中。
Webpack会生成一个chunk你可以通过“魔法注释”自定义 chunk 的名称const About () import(/* webpackChunkName: about-group */ ./About.vue)
四、
总结首屏优化建议首页Home使用静态导入而其他非核心路径、非首屏展示的弹窗/插件全部使用懒加载。
用户体验使用异步组件时建议配合loadingComponent避免加载过程中组件区域出现突兀的空白 。
原文 https://juejin.cn/post/76016061