码迷,mamicode.com
首页 > 其他好文 > 详细

vue中异步组件实现按需加载

时间:2021-03-03 12:06:41      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:复杂   文件夹   结构   ret   注意   pre   就会   实现   city   

在项目的目录中找到router文件夹里的index.js

index.js文件原先的文件结构
import Vue from vue
import Router from vue-router
import Home from @/pages/home/Home
import City from @/pages/city/City
import Detail from @/pages/detail/Detail

Vue.use(Router)

export default new Router({
  routes: [{
    path: /,
    name: Home,
    component: Home
  }, {
    path: /city,
    name: City,
    component: City
  }, {
    path: /detail/:id,
    name: Detail,
    component: Detail
  }],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})


修改后的index.js文件结构
import Vue from vue
import Router from vue-router

Vue.use(Router)

export default new Router({
  routes: [{
    path: /,
    name: Home,
    component: () => import(@/pages/home/Home)
  }, {
    path: /city,
    name: City,
    component: () => import(@/pages/city/City)
  }, {
    path: /detail/:id,
    name: Detail,
    component: () => import(@/pages/detail/Detail)
  }],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})



注意:当app.js文件很小或者不超过1MB的时候我们没必要把app.js拆分进行异步加载,这样就不会造成多余的http请求了,否则的话就会降低页面的性能


页面中的异步加载组件 我们不单单可以在路由中使用异步加载组件,在一个页面中也可以使用 如页面中异步加载Header.vue组件 原先的写法
<script> import HomeHeader from ./components/Header export default { components: { HomeHeader } } </script> 异步加载的写法 <script> export default { components: { HomeHeader: () => import(./components/Header) } } </script>

页面组件按需加载总结

1,使用vue异步组件,可以将复杂页面的框架代码和子组件代码拆开,优先加载框架代码,显著提高页面加载速度;
2,组织复杂页面的代码时,可以考虑对于打开首屏时不需要渲染的子组件,使用v-if控制其只在需要的时候被渲染。

 

vue中异步组件实现按需加载

标签:复杂   文件夹   结构   ret   注意   pre   就会   实现   city   

原文地址:https://www.cnblogs.com/fsg6/p/14470002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!