vue-cli如何正确关闭prefetch

vue-cli如何正确关闭prefetch

prefetch和preload

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

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

import(/* webpackPrefetch: true */ 'LoginModal');
import(/* webpackPreload: true */ 'ChartingLibrary');

• prefetch：用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容
• preload：用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload

路由懒加载

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

const Foo = () => import('./Foo.vue')

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

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

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 链接并手动选择要提前获取的代码区块

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

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

然而

设置之后没有效果，于是打印出config一探究竟

为毛是preload和prefetch后面有个index，于是就换下名字再次尝试

config.plugins.delete('prefetch-index').delete('preload-index');

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

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

再看看我的入口配置，果然是index

参考文章
[1]: https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
[2]: https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules