// 官方提供的路由懒加载的写法
{
     path: '/about',
     name: 'about',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}

  vue-cli3中模板提供了路由懒加载的写法,/* webpackChunkName: "about" */是指把about.vue的js代码提取到about.[hash].js上,减少入口js文件的体积,提高加载性能。

  但我在chrome的dev tools中看到了about路由居然在首页就加载了
dev tools 显示的http请求
  这就奇怪了,官方案例还会出错,于是查了下有没有其他人遇到同样的问题。最后发现是prefetching和preloading这两个html5的新特性(Resource Hint)在影响加载。
  由于vue-cli是使用webpack进行编译和打包的,本文对prefetching和preloading的研究从webpack的官方文档分析,html5的特性请自行百度。

prefetching

webpack4.6.0以上支持prefetching 特性

prefetch 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。

两个关键词,空闲时间未来空闲时间 表明这个预加载的内容是不会影响当前页面的加载,未来表明这个内容是当前页面不需要呈现的内容。这样子,岂不是和路由懒加载的理念冲突了吗?那就把prefetch给关了吧,在vue.config.js上增加如下配置。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 或者
    // 修改它的选项:
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

这样就解决了路由无法懒加载的问题了。

但是!!! 这个预加载是不会影响当前页面的加载性能的,因此预加载是可以被保留的,那在什么情况下我们需要禁用预加载呢?当然是对流量损耗敏感(移动端)的应用场景,在首页对子页面进行全面的预加载,而用户可能只需要跳转其中的一两个子页面甚至停留在首页,造成大量的流量浪费。因此,需要做到控制特定的路由预加载。首先,先移除prefetch插件,然后按需添加预加载。

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

这样就能做到按需预加载了。

preloading

webpack4.6.0以上支持preloading 特性

preloading是一种 resource hint,用来指定页面加载后很快会被用到的资源,所以在页面加载的过程中,我们希望在浏览器开始主体渲染之前尽早 preload。

preloading用于提高资源加载的优先级,当页面开始加载时,我们总是想核心的代码或资源得到优先处理,因此可以通过preloading提高优先级。

import(/* webpackPreload: true */ 'ChartingLibrary');

但是在webpack上有一句提醒:

Using webpackPreload incorrectly can actually hurt performance, so be careful when using it.
错误的使用webpackPreload实际上会影响性能,因此要谨慎使用。

如果把一个体积巨大的资源放在最高优先级加载,页面可能会长时间空白,用户体验体验非常差,因此,慎用。

目前,我依然没有找到如何在vue中使用preloading的方法,官网没有代码案例,webpack上的方法也无法在vue中实现,暂时先记录下来,等调通后再来更新,如果知道这一块的,不妨留言传授,十分感谢!

最后

懒加载优化了首屏加载的速率
prefetch预加载优化了子页面加载的速率
amazing~

Logo

前往低代码交流专区

更多推荐