vue-cli如何正确关闭prefetchprefetch和preload

webpack4.6.0+新增了对prefetching和preloading的支持

通过在声明导入时使用内联指令可以让webpack输出"Resource Hint",告诉浏览器

javascript 复制代码
import(/* webpackPrefetch: true */ 'LoginModal');
import(/* webpackPreload: true */ 'ChartingLibrary');
  • prefetch:用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容
  • preload:用来指定页面加载后很快会被用到的资源,所以在页面加载的过程中,我们希望在浏览器开始主体渲染之前尽早 preload

路由懒加载

结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载

javascript 复制代码
const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

可以通过内联指令设置chunkname将所有组件都打包在同个异步块 (chunk) 中

javascript 复制代码
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

如何关闭prefetch

Prefetch 链接将会消耗带宽。如果你的应用很大且有很多 async chunk,而用户主要使用的是对带宽较敏感的移动端,那么你可能需要关掉 prefetch 链接并手动选择要提前获取的代码区块

因为项目中用了路由懒加载,而且组件数量比较多,所以想着关掉会让首屏加载快些

javascript 复制代码
// 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
    })
  }
}

然而

设置之后没有效果,preload和prefetch后面有个index,于是就换下名字再次尝试

javascript 复制代码
config.plugins.delete('prefetch-index').delete('preload-index');

最后终于生效了,为什么会这样呢,看看源码怎么写的
node_modules/@vue/cli-service/lib/config/app.js

javascript 复制代码
webpackConfig
  .plugin(`preload-${name}`)
     .use(PreloadPlugin, [{
       rel: 'preload',
       includeHtmlNames: [filename],
       include: {
         type: 'initial',
         entries: [name]
       },
       fileBlacklist: [/\.map$/, /hot-update\.js$/]
     }])

webpackConfig
  .plugin(`prefetch-${name}`)
    .use(PreloadPlugin, [{
      rel: 'prefetch',
      includeHtmlNames: [filename],
      include: {
        type: 'asyncChunks',
        entries: [name]
      }
    }])
})

vue-cli如何正确关闭prefetch - 灰信网(软件开发博客聚合)

相关推荐
snowbitx5 分钟前
一篇文章彻底搞懂前端架构层面分层设计
前端·设计模式·前端框架
Keepreal4968 分钟前
React组件生命周期,各个生命周期可以进行什么操作以及如何使用useEffect模拟组件生命周期
前端·react.js
JiKun9 分钟前
ECMA 2025(ES16) 新特性
前端·javascript
一路上__有你13 分钟前
闲来无事,写一篇文章吧!
前端·javascript·vue.js
keep_di14 分钟前
05-vue3+ts中axios的封装
前端·vue.js·ajax·typescript·前端框架·axios
JiKun29 分钟前
ECMA 2024(ES15) 新特性
前端·javascript
0__O34 分钟前
细说 new Function
javascript
百锦再36 分钟前
从 .NET 到 Java 的转型指南:详细学习路线与实践建议
android·java·前端·数据库·学习·.net·数据库架构
i小杨1 小时前
前端埋点(打点)方案
前端·状态模式
前端加油站1 小时前
时间转换那些事
前端·javascript