---
# System prepended metadata

title: vue-router
tags: [Vue, vue-router]

---

# vue-router 
###### tags: `Vue` `vue-router`


## 設定懶加載後 還是會把全部的js一次載入 問題解決！
原因：
```
原来vue-cli3 默认会把所有通过import()按需加载的javascript文件加上 prefetch 。

prefetch是什么？在打包后的文件中，查看index.html我们会发现类似这个 <link href=/js/chunk-118075e7.5725ab1a.js rel=prefetch>。<link rel="prefetch">会在页面加载完成后，利用空闲时间提前加载获取用户未来可能会访问的内容。

prefetch链接会消耗宽带，如果是在移动端，而且存在大量的chunk，那么可以关掉 prefetch 链接，手动选择要提前获取的代码区块。
```
解決辦法：

移除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
    })
  }
}
```

需要先載入的，手動加入prefetch
```
import(webpackPrefetch: true, './someAsyncComponent.vue')
```