美文网首页
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 默认预加载

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