zoukankan      html  css  js  c++  java
  • vue----webpack----路由懒加载,组件懒加载

     一、懒加载
    也叫延迟加载或者按需加载,即在需要的时候进行加载,
    二、为什么要使用懒加载
      像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,

    造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,
    即使做了loading也是不利于用户体验,

    运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

        简单的说就是:进入首页不用一次加载过多资源造成用时过长
    方式一:使用vue的异步组件,可以实现路由的懒加载
     {           
         path: '/home',           
         name: 'home',           
         component: resolve => require([需要加载的路由的地址], resolve)       
       } 
    方式二: es6提出的import(推荐使用这种方式)
    const homeFn = () => import('../components/home/home')
             {   
          path: '/home',   
           name: 'home',            
          component: homeFn       
         },     
    组件懒加载
    和路由懒加载方式相同,改变组件的引入方式
    方式一:
    方式二:
     
    总结:
    路由懒加载和组件懒加载都是通过改变组件的引入方式
     
     
     
     
  • 相关阅读:
    JS和C# 里的闭包及闭包在事件中的使用
    ***项目开发记录
    七牛云存储之应用视频上传系统开心得
    二维码及二维码接合短URL的应用
    EF批量添加,删除,修改的扩展
    ngTemplateOutlet递归的问题
    每日新知2019-06-03
    Spring boot初始
    纯前端播放本地音乐
    macbook 安装任意来源
  • 原文地址:https://www.cnblogs.com/SRH151219/p/10445246.html
Copyright © 2011-2022 走看看