vue项目首屏加载慢的根源在于所有组件打包进同一app.js，解决关键是按需加载；路由懒加载通过import()动态导入组件，使webpack自动拆分为独立chunk，实现用时加载。
Vue 项目首屏加载慢，往往是因为所有组件和依赖被打包进了同一个 app.js，浏览器得一次性下载、解析、执行大量 JS，自然卡顿。解决的关键不是“优化单个组件”，而是**按需加载——页面用到什么，再加载什么**。路由懒加载就是最直接、最有效的一招。
什么是路由懒加载？
懒加载（Lazy Loading）指：组件不在应用初始化时加载，而是在路由匹配到该路径、准备渲染对应页面时，才动态导入（import()）并实例化组件。Webpack 会自动把这部分代码拆成独立的 chunk 文件，实现“用时加载、按需下载”。
对比写法：
-
不懒加载（全部打包进主包）：
component: Home或component: require('./views/Home.vue') -
懒加载（生成独立 chunk）：
component: () => import('./views/Home.vue')
怎么在 Vue Router 中配置懒加载？
只需把路由配置中的 component 值，从直接引用改为一个返回 Promise 的函数即可。Vue 和 Webpack 会自动处理异步加载与组件注册。
示例（Vue Router 4 / Vue 3）：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章