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 - 灰信网(软件开发博客聚合)

相关推荐
aiprtem32 分钟前
基于Flutter的web登录设计
前端·flutter
浪裡遊35 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术43 分钟前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理1 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止1 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall1 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴1 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码2 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github