美文网首页
vue-cli3 默认预加载

vue-cli3 默认预加载

作者: 橙子_b9bc | 来源:发表于2021-07-22 09:34 被阅读0次

如不需要则删除,配置为

chainWebpack: config => {
    // console.log(config, 'chainWebpack')
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 删除文件预加载
    config.plugins.delete('preload');
  }

prefetch 加载其他页面资源,空闲时加载,不一定会加载
preload 加载当前页面的资源,一定会加载,在渲染前加载

prefetch,preload 使用的必要性

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

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

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

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

错误的使用webpackPreload实际上会影响性能,因此要谨慎使用。
如果把一个体积巨大的资源放在最高优先级加载,页面可能会长时间空白,用户体验体验非常差,因此,慎用。

优化点:懒加载优化了首屏加载的速率,prefetch预加载优化了子页面加载的速率

相关文章

  • vue-cli3 默认预加载

    如不需要则删除,配置为 prefetch 加载其他页面资源,空闲时加载,不一定会加载preload 加载当前页面的...

  • 深入解析ViewPager懒加载

    前言 ViewPager默认情况的加载,会默认预加载一个的布局到ViewPager中,这就时ViewPager的预...

  • ViewPager<第五篇>:预加载和懒加载

    预加载 ViewPager为什么让滑动流畅,默认将左右两个页面加载到了内存,这叫做ViewPager的预加载,但是...

  • 禁止ViewPager预加载问题

    首先来说明一下,什么是ViewPager的预加载:ViewPager有一个 “预加载”的机制,默认会把ViewPa...

  • Android Fragment 懒加载

    ViewPager默认会去预加载当前页面前后的两个Fragment。为了防止加载多个Fragment时出现切换卡顿...

  • 预加载与智能预加载 (VIA)

    预加载与智能预加载(iOS) 网络与性能 预加载无限滚动列表Threshold惰性加载智能预加载 总结 前两次的分...

  • 图片预加载

    背景 利用图片的预加载技术获得更好的用户体验 什么是有序预加载和无序预加载 jQuery插件的写法 图片预加载,预...

  • Viewpager和Fragment的懒加载机制

    一、背景 ViewPager默认加载当前页面,而且预加载当前页面的前后两个页面数据(即同时会加载3个页面的数据),...

  • WebsAPI(四)——事件监听

    在同一个文件中,代码会预解析并且提升。 若加载多个文件时,后续的文件默认会等待上一个文件加载完并执行后,才会继续预...

  • Android ViewPager+Fragment懒加载

    懒加载原因 ViewPager默认会预加载下一页,而下一页用户不一定会浏览,加载下一页耗费了内存、流量,懒加载无疑...

网友评论

      本文标题:vue-cli3 默认预加载

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