VUE路由懒加载

webpack会把所有的js文件都打包成一个js文件，影响页面加载速度。

    　（1）router/index.js中配置懒加载的路由地址：　

　　　　component: () => import(/* webpackChunkName: "about" */ ‘../views/About.vue‘)

　　（2）脚手架默认采用babel翻译js代码，需要安装babel的一个插件：

　　　　npm i -save @babel/plugin-syntax-dynamic-import　　

　　　　此时npm run build 编译完成的结果中可以看到以要懒加载的组件命名的独立js文件

　　　　此时独立的.js文件还是会在后台自动加载，即使不会访问的页面也会下载下来。

　　（3）配置webpack配置文件（vue/cli 3.0版本的新的webpack配置文件）

　　　　在整个项目的根目录下新建vue.config.js文件，内容如下：

module.exports={
   chainWebpack:config=>{
    config.plugins.delete("prefetch")
  }
}
//prefetch意思是，一旦网络空闲，就自动下载独立.js文件

 此时页面的head中就看不到<link href="/js/about.js" rel="prefetch">了

VUE路由懒加载

原文：https://www.cnblogs.com/codexlx/p/12496270.html