Vue网站首页加载优化本文主要讲解Vue项目打包后vendor.js文件的优化方法，以及如何优化和开启Vue压缩以及nginxgzip压缩的使用。其他还有界面优化等。1.Vendor.js优化?因为Vue项目随着功能的增加会产生更多的依赖，所以减少vendor.js的主要方式就是不打包依赖！！1.1第一步，cdn导入各种包index.html以cdn的方式导入vue、vuex、axios、iview等包，如下图：1.2第二步，使用vue等包,注释掉import介绍在main.js文件中，注释掉需要排除的依赖import，注释掉Vue.use//Vue.prototype.$axios=axios;//Vue.use(iView)1.3第三步在webpack.base.conf.js中打包并忽略vue等包，排除所有需要从CDN导入的依赖，包括iviewvueaxios等如下图1.4最后重新打包npm运行build可以发现Vue的vendor.js文件确实变小了很多，所以当浏览器在加载首页的时候请求它，它不会太大。可以看到vendor.js从1M多减少到400k。插件配置打开webpack.prod.config.js并配置此代码资产：'[path].gz[query]'，算法：'gzip'，测试：newRegExp('.('+config.build.productionGzipExtensions.join('|')+')$'),threshold:10240,minRatio:0.8}))}2.3配置打包报告查看详细打包信息打开package.json，配置"report":"npmrunbuild--report=true"2.4Repackage查看Gzip压缩情况重新运行npmrunbuild，可以看到提供的gz压缩包vendor.js.gz已经减少到100k左右，从一开始的1M优化到当前100k3.开启Nginx的Gzip功能3.1gzip的概念gzip是Web世界最广泛使用的文件压缩算法，已经被大多数服务器端和客户端软件（比如我们使用的浏览器）所支持gzip最擅长压缩纯文本文件，它的效果非常明显，可以减少70%以上的文件大小，所以在web项目中开启gzip是非常有必要的.gz）让nginx根据需要选择.gz文件输出对请求，使用nginx中的模块http_gzip_static_module，不占用CPU资源，nginx的配置只需要在上面加一行，如下：563513413，不管你是大是小百度，欢迎入驻gzip_static上；3.3主要是添加http_gzip_static_module模块nginx中的模块http_gzip_static_module默认是没有的所以一定要记得添加nginx中的http_gzip_static_module模块，看：yum安装下的nginx，如何添加模块，以及添加第三方模块安装完后http_gzip_static_module模块，使用nginx-V命令查看模块是否加载成功3.4nginxgzip详细配置打开nginx。gzip_comp_level5；压缩级别，字数越大，压缩效果越好，gzip_staticon的时间越长；重要的！表示使用压缩的gz文件，vue根据请求生成的gz文件gzip_min_length1k；gzip_http_version1.1;gzip_types文本/普通应用程序/javascript文本/css应用程序/xml文本/javascript应用程序/x-httpd-php图像/jpeg图像/gif图像/png；3.5查看是否生效可以看到对应的header中有Content-Encoding:gzip，说明配置成功了￣4.首页界面优化?对于首页界面页面优化，主要是不需要的字段不返回，减少消息。一开始把markdown消息和markdown生成的html消息都包含进来，导致消息很大，而且请求接口的时间也比较长?可以看到优化最终接口只需要43ms5.banner图片分割，图片CDN将首页Banner图片拆分压缩成8份，放到CDN上其他图片全部放到CDN上，我用的是七牛云CDN6.七牛云CDN上传工具类/***七牛云访问工具**@authorjohnny*@create2019-12-03pm2:17**/publicclassQiniuAccessUtils{/***七牛AK自己去七牛云应用*/publicstaticfinalStringaccessKey="e1C2jGSQsaTBN******************";/***七牛SK去七牛云申请*/publicstaticfinalStringsecretKey="23pb5PmhN9j4******************";/***七牛存储空间名称*/publicstaticfinalStringbucket="johnny-blogs";/***七牛默认域名->切换到官方域名http://cdn.askjohnny.com/*/publicstaticfinalStringdomain="http://cdn.askajohnny.com/";//设置账户的ACCESS_KEY和SECRET_KEYprivatestaticStringACCESS_KEY=accessKey;privatestaticStringSECRET_KEY=secretKey;//待上传空间//对应到你上传到七牛的路径（自己建文件夹，注意设置为public）privatestaticStringbucketname=bucket;//密钥配置privatestaticAuthauth=Auth.create(ACCESS_KEY,SECRET_KEY);privatestaticConfigurationcfg=newConfiguration(Zone.huanan());//创建上传对象privatestaticUploadManageruploadManager=newUploadManager(cfg);//简单上传，使用默认策略，只需要设置上传空间名称publicstaticStringgetUpToken(){returnauth.uploadToken(bucketname);}publicstaticStringUploadPic(StringFilePath,StringFileName){Configurationcfg=newConfiguration(Zone.huanan());UploadManageruploadManager=newUploadManager(cfg);//AccessKey值StringaccessKey=ACCESS_KEY;//SecretKey值StringsecretKey=SECRET_KEY;//存储空间名称Stringbucket=bucketname;Authauth=Auth.create(accessKey,secretKey);StringupToken=auth.uploadToken(bucket);try{Responseresponse=uploadManager.put(FilePath,FileName,upToken);//解析上传成功的结果DefaultPutRetputRet=newGson().fromJson(response.bodyString(),DefaultPutRet.class);System.out.println(putRet.key);System.out.println(putRet.hash);返回域名+文件名；}catch(QiniuExceptionex){响应r=ex.response;System.err.println(r.toString());尝试{System.err.println(r.bodyString());}catch(QiniuExceptionex2){//忽略}}returnnull;}}7.小结本文主要讲解Vue项目打包后大型vendor.js文件如何优化，以及如何开启Vue压缩和nginxgzip压缩的使用。其他的则与界面优化等实践有关。真相！！！
