当前位置:首页 » 《随便一记》 » 正文

性能优化---vue路由懒加载和异步组件__处女座程序员的日常的博客

25 人参与  2022年03月14日 13:08  分类 : 《随便一记》  评论

点击全文阅读


1.路由懒加载
整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块。
实现方式有:
1.require:加载组件。
component: resolve => require(["@/view/system/login/Login"], resolve);
2.import引入
const Login = ()=> import(’@/views/login/index.vue’)

2.异步组件:
在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。提高页面渲染速度。

 //组件1
 <tempalte>
    <Parent v-if="show"></Parent>
    <button @click='handleShow'>出现</button>
  </tempalte>
  <script>
  import Partent from './chuancan/parent'//直接引入
  export default {
  data(){
  ratun{
  show:true,
  }
  },
   components: {Parent}
  methods(){
         handleShow(){
      console.log("出现了");
      this.show =  true;
      }
   }
    }
 </script>
 //parent组件
  <div>
        父组件
    </div>

页面效果:
可以看出Parent组件对应的.js文件已经在刚进入页面中就被加载进来了
在这里插入图片描述
异步加载:
我们想要的效果是点击按钮后再去请求js资源。

 //组件1
 <tempalte>
    <Parent v-if="show"></Parent>
    <button @click='handleShow'>出现</button>
  </tempalte>
  <script>
  export default {
  data(){
  return{
  show:false,
  }
  },
  components:{
     Parent:()=>import (/*webpackChunkName:'async'*/'./chuancan/parent')
   //动态引入,将这个包命名为async
   },
  methods(){
         handleShow(){
      console.log("出现了");
      this.show =  true;
      }
   }
    }
 </script>

此时页面中没.js文件
在这里插入图片描述

当点击按钮后,才出现了async.js文件
在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/36191.html

加载  组件  页面  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1