路由懒加载 | vue router import
当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。VueRouter支持开箱即用的动态导入[1],这意味着你可以用动态导入代替静态导入:js//将//importUserDetailsfrom./views/UserDetails.vue//替换成constUserDetails=()=>import(./views/UserDetails.vue)constrouter=createRouter({//...routes:[{path:/users/:id,component:UserDetails}//或在路由定义里直接使用它{path:/users/:id,component:()=>impor...
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。
Vue Router 支持开箱即用的动态导入[1],这意味着你可以用动态导入代替静态导入:
js// 将 // import UserDetails from ./views/UserDetails.vue // 替换成 const UserDetails = () => import(./views/UserDetails.vue) const router = createRouter({ // ... routes: [ { path: /users/:id, component: UserDetails } // 或在路由定义里直接使用它 { path: /users/:id, component: () => import(./views/UserDetails.vue) }, ], })component (和 components) 配置接收一个返回 Promise 组件的函数,Vue Router 只会在第一次进入页面时才会获取这个函数,然后使用缓存数据。这意味着你也可以使用更复杂的函数,只要它们返回一个 Promise :
jsconst UserDetails = () => Promise.resolve({ /* 组件定义 */ })一般来说,对所有的路由都使用动态导入是个好主意。
注意
不要在路由中使用异步组件[2]。异步组件仍然可以在路由组件中使用,但路由组件本身就是动态导入的。
如果你使用的是 webpack 之类的打包器,它将自动从代码分割[3]中受益。
如果你使用的是 Babel,你将需要添加 syntax-dynamic-import[4] 插件,才能使 Babel 正确地解析语法。
把组件按组分块 [5]使用 webpack [6]有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chu...