美文网首页vue学习
Vue路由懒加载-prefetch预加载问题

Vue路由懒加载-prefetch预加载问题

作者: 钱英俊真英俊 | 来源:发表于2020-03-09 16:57 被阅读0次

通常项目配置router的懒加载,基于webpack4+和ES6,最简单的写法是

const routers = [{
  path: '/xxx',
  name: 'xxx',
  component: () => import('@/xx/xxx.vue') // import()的动态引入
}]

此时文件加载按页面引入,每个页面跳转进加载该页面需要的资源


prefetch预加载使首屏加载变慢

在vue-cli3升级之后,配置了webpack的预加载,这时候除了路由懒加载需要的当前页面资源,其他资源也会被请求,但不会被解析



白色文件就是预加载的文件,仍然会耗时下载,只是不会被解析。
由于预加载文件比较多,反而阻塞了实际需要的文件下载,首页渲染速度变慢。

解决方法

// 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
    })
  }
}

相关文章

  • Vue路由懒加载-prefetch预加载问题

    通常项目配置router的懒加载,基于webpack4+和ES6,最简单的写法是 此时文件加载按页面引入,每个页面...

  • 复习3

    vue路由懒加载 1.vue路由懒加载解决的什么 问题:解决打包后文件过大的问题,从而优化页面加载,提升性能 注意...

  • webpack基础使用(五)

    十六、加载构建优化 懒加载 预获取 & 预读取 与 prefetch 指令相比,preload 指令有许多不同之...

  • 微信程序项目边界

    详情头部标题省略加载{懒加载,预加载,无限加载,加载中} 常见路由切换

  • vue中组件懒加载

    vue中组件懒加载的方法 1.异步实现路由懒加载 2.import(推荐使用这种方式) 同理,路由懒加载和组件懒加...

  • vue路由懒加载及组件懒加载

    路由 和 组件 的常用两种懒加载方式:1、vue异步组件实现路由懒加载component:resolve=>(['...

  • vue路由懒加载和组件懒加载

    vue路由懒加载及组件懒加载 一、为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白...

  • Vue路由懒加载

    VUE路由懒加载及组件懒加载一、为什么要使用路由懒加载为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问...

  • 浅谈 vue项目优化

    1.路由懒加载 使用vue-router的方法 2.图片懒加载 组件缓存 使用vue的,详...

  • vue中页面加载进度条效果的实现

    效果图: 1.介绍: 我们在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载。路由懒加载配合gizp确...

网友评论

    本文标题:Vue路由懒加载-prefetch预加载问题

    本文链接:https://www.haomeiwen.com/subject/sumpdhtx.html