Vue remove prefetch with laravel mix and get a cdn like script?

I noticed that I can split my vue application in chunks and load the chunks if needed. So far I got it that npm extracts the parts in their own files and the site works as expected.

My code for the split: (Afaik this is the correct way!?)

const Account = () => import(/* webpackChunkName: "js/account" */ './components/Account.vue')

new Vue({
    components: {
        'my-account': Account
    },
})

Next I inspected the network tools of my browser and saw that the chunks are loaded everywhere.

After some research it seems that i have to remove the prefetch plugin from vue? Like described here https://cli.vuejs.org/guide/html-and-static-assets.html#preload

I'm currently using the cdn version of vue. So how would I remove the prefetch plugin in laravel mix. I would like to have a seperate file for vue like the cdn version. Is this even possible?

bobbybouwmann

5 years ago

Level 88

As far as I know, the only way is to compile it yourself without the prefetch plugin and surf that over your CDN. In the end you need to compile it yourself, to make it work without the plugin. The CDN is only used for quick access to a resource or to delay network time if you have a slow server.

2 likes

ronon

5 years ago

Level 9

@bobbybouwmann Thought so too, but wasn't quite sure. Do you know how to do this with laravel-mix?

The vuejs docs says to include this code in webpack:

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

    // or:
    // modify its options:
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

How would that translate to laravel-mix?

ronon

5 years ago

Best Answer

Level 9

It seems vue does this automatically if you use the cdn version. So no need to do it own my own

Please or to participate in this conversation.