前端优化（Vue项目优化首页加载速度）

玄学8秒！

用户在访问网站时，加载时间超过8秒就会感到不耐烦，亲自尝试了很多个时间段，感觉2-4秒是比较舒服的(而且还能给人一种哇这个网站好高级的样子啊好快啊优化也太下功夫了叭 的错觉)。

经过我的虚心求教 (不耻下问)之后，记录下几个提高加载速度的方法

一、路由懒加载

{ 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属性的脚本按顺序执行 如果脚本不改变文档的内容，可将defer属性加入到script标签中，以便加快处理文档的速度 简单点就是：延迟到页面解析完毕之后再执行

3、动态创建script标签（基本不用啦） 在还没定义defer和async前，异步加载的方式是动态创建script，通过window.onload方法确保页面加载完毕再将script标签插入到DOM中

function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function(){ addScriptTag("js/index.js"); }

找到vue.conf.js文件，在 module.exports = { } 中添加

configureWebpack: { externals: { //不打包 'vue': 'Vue',//对应CDN引入模块 }, }

通过CDN引入后要在main.js里注释掉对应的导入喔

三、压缩文件

添加依赖：npm install --save-dev compression-webpack-plugin module.exports = { publicPath: './', // 设置打包文件相对路径 lintOnSave: false, // 取消 eslint 验证 productionSourceMap: false, //取消.map文件产生 productionGzip: true, //开启压缩 productionGzipExtensions: ['js', 'css'],//压缩类型 //其它 }

npm run build 这时候会同时产生一个同名的.gz文件；就说明成功了 如果报错：

ValidationError: Compression Plugin Invalid Options options should NOT have additional properties

这是版本问题，在项目package.json里将

"compression-webpack-plugin": "^xxxx",

改成

"compression-webpack-plugin": "^1.1.11",

还差一步！ 服务器Nginx启用gzip 在conf里面

gzip on;//动态压缩 gzip_static on;//读取已压缩 gzip_min_length 1k; gzip_buffers 4 32k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml; gzip_vary on; gzip_disable "MSIE [1-6].";

然后reload一下nginx