Document how to disable/customize the prefetch plugin

[wangxiangyao]

What problem does this feature solve?

When I use the asyn load of vue-router, the webpack-plugin prefetch makes all asyn modules preload. This results in the inability to load on demand

What does the proposed API look like?

vue.conf.js

{
  prefetch: {}
}

[wangxiangyao]

我需要使用webpack-chain，来重新配置Prefetch，对么？

[LinusBorg]

I'm not sure what you are talking about, are you referring to the prefetching that's done when you selected the PWA option for your project?

https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

As explained in the plugin's README, you can define what's prefetched by setting the right workbox options in your config.

[gunhaxxor]

I think @wangxiangyao is referring to that the vue-cli sets up a webpack configuration where the webpack preloadplugin is used to inject a prefetch html tag in the index.html for all asyncronous chunks.
Using const Foo = () => import('./Foo.vue') as described in the vue-router documentation will for example generate such prefetch tag for that component. Like so: <link rel="prefetch" href="/0.js">

Extract of webpack config, from running vue inspect:

/* PreloadPlugin */ {
      options: {
        rel: 'prefetch',
        include: 'asyncChunks',
        fileBlacklist: [
          /\.map$/
        ]
      }
    },

I guess @wangxiangyao is requesting a convenient way to alter this configuration. Perhaps the use case is that there are chunks that the developer for sure knows should only be loaded in rare cases.
I'm also interested in what way it's possible to customize the generation of prefetch tags in a vue-cli project.

[LinusBorg]

Thanks @Dealerpriest, that was very helpful.

This can be custimzed with webpack-chain today like this:

// vue.config.js
chainWebpack: (config) => {

  // A, remove the plugin
  config.plugins.delete('prefetch')
  
  // or:
  // B. Alter settings:
  config.plugin('prefetch').tap(options => {
    if (!options[0].fileBlacklist) options[0].fileBlacklist = []
    options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
    return options
  })
}

Relevant source: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/app.js#L20-L25

We can discuss wether or not it makes sense to expose this as a config value in vue.config.js

[gunhaxxor]

Thanks for the swift reply! I will look into the suggestions in your answer.

Regarding the discussion of exposing it in vue.config.js:
I would argue that it would be very valuable to be able to configure this in a convenient way. A good example is a SPA where there is a special route to an admin interface. This route would only be used by a very small fraction of connecting clients (the admins). The current setup would still have the browser of all 'user' clients fetch the admin chunks, using bandwidth for no reason at all. Some way to manage this would allow for a more streamlined request behaviour from the client browsers.

[LinusBorg]

Good use case example.

However, Similar arguments can be brought up for many other plugins, and if the manipulation of said plugins is as easy as I showed above, it might be better to create some sort of recipe list which examplifies how to use chainWebpackConfig to manipulate common plugins like:

• html-webpack-plugin
• optimize-css
• uglify-es
• prefetch

etc. pp.

That would keep the config file lean and keep the api flexible.

[wangxiangyao]

Like @Dealerpriest said, Please forgive me for not being clear.After the question, I suddenly thought of the chain of webpack, so I went to learn how to write chain config, and then solved this problem.

webpack-chain

However, as far as the issue itself is concerned, I still hope to have a simpler, more visible way to tell developers that the prefetchPlug is used. SPA based on the need to load on route is a common optimization method.While the new vue-cli defaults to all asyn file prefetch, it may not be easy for developers to take note of this when using the new vue-cli package.For example, I directly package and upload to the formal environment, which causes the project to load slowly.

[gunhaxxor]

Hello again. I've now had time to try out the method you suggested @LinusBorg.
Using webpack-chain works pretty well.
I just want to make you aware that the example you provided use the object key chainWebpackConfig when it should actually be chainWebpack. I thought I should mentione it if someone else comes along here and wants to try it out.
My current whole vue.config.js currently looks like this:

// vue.config.js

module.exports = {
  chainWebpack: config => {
    // A, remove the plugin
    config.plugins.delete('prefetch');

    // or:
    // B. Alter settings:
    // config.plugin('prefetch').tap(options => {
    //   options.fileBlackList.push([/myasyncRoute(.)+?\.js$/]);
    //   return options;
    // });
  }
};

[LinusBorg]

I just want to make you aware that the example you provided use the object key chainWebpackConfig when it should actually be chainWebpack.

Good catch, will edit my post.

My current whole vue.config.js currently looks like this:

You do realize that my code samle contains two separate options to choose, and you use them both? You can't remove the plugin and then alter its options, that doesn't make sense.

[wangxiangyao]

this is my vue.config.js

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
  },
  configureWebpack: () => {
    return {
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
      },
      plugins: [
        // new BundleAnalyzerPlugin(),
        new CompressionPlugin()
      ]
    }
  }
}

if just use webpack-chain:

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
    config
      .plugin('CompressionPlugin')  // the plugin name depending on your
      .use(CompressionPlugin) // if need args --> .use(webpack.somePlugin, args)
  }
}

still work well, 完美 😄O(∩_∩)O