登录
原创

vue-组件按需加载

发布于 2021-11-12 阅读 90
  • 前端
  • Vue.js
  • ECMAScript 6
原创

组件按需加载

路由配置:

{
    path: '/***',
    name: '***',
    component: () => import('../views/***.vue') // 按需加载
  }

在vue中配置路由时,可以在头部先引入组件,然后下面定义路由时,在指向到具体使用的组件,这种是页面运行时,组件全部加载,占内存大

可以使用ES新特性,进行组件按需加载不在上方引入,在下面定义路由时,指向具体组件时再import导入:

image.png

按需加载,一开始没点击链接的时候两个js文件:

image.png

点击按需加载的组件链接后,出现新的js文件:

image.png

小提示:如果是普通方法,先导入组件,定义路由时再指向具体组件,一般 name 的 值 和 组件名 一样
eg:

image.png

清空浏览器缓存小知识:

长按这个刷新图标,弹出图下选项,选择最下面“清空缓存并硬性重新加载”:

image.png

评论区

零00
5粉丝

时光荏苒,我自清欢

0

1

0

举报