Vue.js之组件异步加载

深碍√TFBOYSˉ_ 2022-05-14 13:08 522阅读 0赞

当项目中组件特别多的时候,通过webpack打包的组件非常多,如果在访问其中某一个路由对应的组件时,加载了所有组件的文件,对于性能的消耗是非常浪费的。
此时,我们就需要使用组件异步加载,即进入对应的组件时,只加载核心组件、代码和对应的组件代码
通过vue-router和webpack实现
需要插件支持: babel-plugin-syntax-dynamic-import

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. // 这里不在提前引入所有需要的组件,而是在路由配置项的component中按需引入即可
  4. // import login from ('../components/login/login.vue')
  5. // import homePagefrom ('../components/login/homePage.vue')
  6. const homePage= () => {
  7. import('../components/home/homePage.vue')
  8. }
  9. Vue.use(VueRouter)
  10. const route = [
  11. {
  12. path: '/login',
  13. name: "登陆",
  14. // 当该路由被调用时,再去请求对应的组件内容
  15. component: () => import('../components/login/login.vue')
  16. },
  17. {
  18. path: '/homePage/:id',
  19. name: "首页",
  20. // 当该路由被调用时,再去请求对应的组件内容
  21. component: () => import('../components/home/homePage.vue')
  22. }
  23. ]
  24. export default () => {
  25. return new VueRouter ({
  26. route
  27. })
  28. }

发表评论

表情:
评论列表 (有 0 条评论,522人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue.js组件异步

    当项目中组件特别多的时候,通过webpack打包的组件非常多,如果在访问其中某一个路由对应的组件时,加载了所有组件的文件,对于性能的消耗是非常浪费的。 此时,我们就需要使用

    相关 react组件异步

    我们在用react的时候,希望组件异步加载,提高性能,那么应该怎么实现呢? 往下看。。。 解释一波: react异步加载的方法很多,这里只说一种,因为这一种直接使用r