阅读 90

vue cli3 中关于懒加载的研究

{ path: '/login', name: 'login', meta: { title: '登录' }, component: () => import(/* webpackChunkName: "login" */ '../pages/mobile/views/login.vue') },

vuecli3 中提供了路由懒加载的写法,通过import 的方式引入,import 的定义是按需引入,我理解的就是当你访问这个路由的时候在去引入这个组件

image.png

/* webpackChunkName: "login" */ 这个是 吧这个路由需要的js 文件重主入口中抽离出来 减少入口文件的体积,提高加载性能。

配置好以后刷新浏览器看到这个路由还是被加载出来了。

image.png 点进去分析了一下,会发现有Purpose: prefetch,Accept: application/signed-exchange 查了一下mdn 发现这是浏览器的一种行为 链接预取,只有浏览器空闲的时候才会下载,占用带宽,页面在不影响启动时的速度的情况下,提前准备好其他

image.png

image.png 搜了一下prefetch 关键字发现webpack 可以通过删除这个来达到 不预取链接的行为。加上这个就可以达到想要的效果了。。

image.png

最后有不对的👏欢迎指正。。。

文章分类
前端
文章标签