延迟加载

延迟加载

在Vue项目中，所有以import方式导入的组件的html+css+js等都会编译到app.js文件中所以这个文件会很大，但是这个文件必然在首屏加载的时候下载。 这就导致了首屏加载慢。这时候可以使用延迟加载解决问题，其中延迟加载又分为异步延迟加载和彻底延迟加载。

异步延迟加载

//第一步注释import导入的文件
//import  About from '../components/About.vue';
//第二步将引入组件的方式以箭头函数的方式异步引入
const routes = [
   {
     path: '/about'，
     component: () => import( /* webpackChunkName: 'about' */ '../components/About.vue' )
   }
]
注意：import中  /* webpackChunkName: 'about' */ 这个注释必须有，这个为将来打包命名

结果：最后打包工具打包不会将 About.vue组件中的内容打包进app.js中，
它会单独打包成一个新的about.js文件，并在页面加载完成后异步加载，从而达到懒加载效果
缺点就是，如果客户不想看About页面，但是还是会下载数据，导致----偷跑流量

彻底懒加载

第一步： 这种方式基于异步延迟加载方式上，也就是先实现异步延迟加载后
 第二步： 跟目录创建文件： vue.config.js    
 第三步： 文件添加以下代码：
 module.exports={
     chainWebpack:config=>{
        config.plugins.delete("prefetch") //取消预加载
    }
}

异步懒加载适用于PC端；彻底懒加载是基于异步懒加载完成的，适用于移动端