如何提高Vue项目首页的加载速度

为何当一个VUE项目过大时，打包之后首次会见首页加载速率会非常的迟钝，是什么缘故起因导致以及怎样办理这些题目?

首页打开速率慢的缘故起因

着实赏识器加载一个页面的进程就是通过http协议从处事器端下载项目所必要的资源，将html js 图片文件下载到当地理会后表现出来，假如呈现网页加载速率慢，打不开无非以下几个缘故起因：

1. 措施自身的Bug导致页面加载非常
2. 项目标资源太大(假如js 大的图片)导致会见赏识器从处事器获取的所需资源的时刻较长
3. 网速慢等

以是当我们的项目呈现这种题目时只要F12开启赏识器的节制台看下network中哀求资源的耗时即可找出题目，通过调查，此刻前端的单页面应用都是是靠 js 天生，由于是spa，并且全部的渲染都在剧本上，js执行必要时刻。其它加载js也要时刻，以是页面越大，加载时刻越长，并且js执行的时刻也长，以是会呈现白屏的环境。

怎样办理这个题目

导致这个题目的缘故起因就是我们项目打包后资源太大导致，以是我们可以只管的镌汰优化打包后文件的巨细，这样题目便迎刃而解，怎么去优化凡是有以下几点：

操作路由的懒加载实现组件的按需加载，这样设置后只有当路由被会见时才会加载对应的组件，而不是在加载首页的时辰就直接加载。

{  
 path: "/usercenter/personal", 
 title: "小我私人书息", 
 component: resolve => { 
   require(["@/views/usercenter/personal.vue"], resolve); //通过requie动态加载即可 
      } 
   }, 

异步加载组件

既然是异步加载，就会存在加载失败等非常环境。这时辰怎么办呢?看官网绐出的另一个特征

这样就可以美满的办理我们的疑问了，当异步组件加载失败后会表现错误的组件。

1. 禁用线上天生的map文件

npm run build编译之后，我们查察编译天生的文件，发明有许多.map文件，这些文件也占了不小的空间。.map文件的浸染是辅佐编译后的代码调试，可是我们上线的代码已经调试完成，以是上线时可以不天生.map文件。

productionSourceMap:  
false  //设置webpack中productionSourceMap值为false即可 

2. 启用Nginx的gzip压缩成果

在nginx.conf中的http{ }中添加如下代码即可：

gzip on; 
gzip_disable "msie6"; 
gzip_vary on; 
gzip_proxied any; 
gzip_comp_level 1; 
gzip_buffers 16 8k; 
gzip_http_version 1.0; 
gzip_min_length 256; 
gzip_types text/plain text/css 
    application/jsonapplication/x-javascript text/xml 
    application/xmlapplication/xml+rss text/javascript 
    application/vnd.ms-fontobjectapplication/x-font-ttf font/opentype   
 image/svg+xml image/x-icon 
 image/jpeg image/gifimage/png; 

设置好后重启处事从头会见网站在节制台中查察是否见效

3. 对付一些通用的器材库可以回收CDN引入，如Jquery，在index.html中从CDN引入，去掉其他页面的组件import，修改webpack.base.config.js，在externals中插手该组件即可。

4. 处事器端SSR渲染。 SSR必要在页面架构做一些对应的调解，轻微伟大，详细可参考https://segmentfault.com/a/1190000015964813。

5. 代码层面的优化，精灵图，组件化模块化，优化代码逻辑，进步代码复用性等。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!