Vue项目优化首页加载速度

一、路由懒加载

{
    path: '/index',
    component: () => import('@/views/index'), //懒加载-访问该页面才加载
 }

这一步之后，打包后会发现很大的chunk-vendors.xxxxxxx.js不见了，其实是分成了不同的js文件

二、使用CDN引入

<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>

在index.hrml里引入
可使用异步加载——async和defer、动态脚本创建

1、async方式
async属性是HTML5新增属性,兼容Chrome、FireFox、IE9+
async属性主要是为了不让页面停下来等待脚本的下载，也就是说async可以在页面渲染的同时在后台下载脚本。
多个异步脚本的话就是谁先下载完谁先执行，不一定会按照顺序执行了，在异步加载的时候建议不要修改DOM

//比如echarts的CDN
<script async  src="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/echarts.js"></script>

2、defer方式
defer属性规定是否对脚本执行进行延迟，直到页面加载为止；兼容所有浏览器
如果是多个脚本，该方法可以确保所有设置了defer属性的脚本按顺序执行
如果脚本不改变文档的内容，可将de