在用Vue2 框架进行单页面开发时,开发完成后项目打包到线上环境,发现vendor脚本有963K,app.css文件也有四百多k,用户第一次打开网页加载这两个文件要十多秒,会使页面白屏十多秒,之后再次加载由于js和css有缓存,所以速度明显提升,但是初次加载时明显用户体验很差,该如何解决初次加载vendor.js和app.css慢的问题呢?是网速太慢的问题吗?按照道理来说,按现在的网速几百kb的脚本加载也是分分钟的事情啊,比如我们随便打开一首歌也要几兆,加载也不至于白屏十多秒啊,于是,我们随便打开一个网页F12调试,如图不难看出打开一个tab网页,js,css,html就会由浏览器UI渲染的线程专门负责页面渲染的,线程执行是并发执行的,所以图片,js脚本,样式css之间的加载也都是交替加载的。

总结如下原因:

原因1:由于vendor.js和app.css较大,UI渲染线程并不会优先加载他俩,但是VUE等主流的单页面框架都是js渲染html body的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。

原因2:还有一个原因就是单页面首次会把所有界面和接口都加载出来,会有多次的请求和响应,数据不能马上加载

二者相加所以会有长时间的白屏。

解决方案

1、懒加载

  原因2处理相对简单先说原因2,对于单页面web应用,一般采用懒加载,我们初次只需要加载渲染必要的HTML主页,后续加载通过用户操作触发,这样就避免了初次加载渲染全部的html,也必不会一开始就去请求所有的接口,把路由修改成这样子的就好了,不会的可百度vue-router懒加载,有很多文章

2、gzip压缩和cdn加载

  解决原因2后我们发现加载并不一定会太快,因为vendor.js和app.css还是相对较大,我们如何变小他

1,gzip压缩,个人感觉这是最简单粗暴而且有效的优化方案

  服务端配置:配置nginx服务器 nginx.conf文件,在http节点下加如下代码

    gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

  

  gzip_types后面的内容表示压缩文件的类型,需要把你要压缩的所有文件类型写上去,还要考虑文件类型支持问题。我就遇到了文件类型问题,一开始我并没有加入application/javascript,运行时发现文件并没有压缩,后来查阅资料尝试加入application/javascript就成功了。 我们看到有很多javascript,application/x-javascript,application/ javascript,text/javascript,这几个的关系引用一位网友的解释,

 

避免出现有些类型不支持的问题,我们最好把它们都配置上。

 前端代码配置: config/index.js文件下面的productionGzip属性改为true

 安装 compression-webpack-plugin:

npm install compression-webpack-plugin --save-dev

 前后端配置都OK了后运行npm run build 发布,我当时运行报错了,报错:Compression Plugin Invalid Options,是由于版本的问题,打开package.json,找到对应文件改为较低版本,然后重新安装就OK了。打包后我这边两个文件明显比之前的九百多kb明显小了几倍,加载速度当然也会快很多了。

 2,cdn加载优化

  原理就是把vue,vue-router,vuex等等你用到的相关库不打包到vendor文件中,而用cdn加载,这样也会减少vendor的大小

可以参考这篇文章:http://www.cnblogs.com/Fordestiny/p/8684556.html

Vue2 框架开发的单页程序页面首次加载慢的原因与优化方案的更多相关文章

  1. vue单页应用首次加载太慢之性能优化

    问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是 ...

  2. C#开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在BIMFACE二次系列博客中详细介绍了服务器端API的调用方式,如下列表 C#开发BIMFACE系列1   BIMFAC ...

  3. vue 页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器,发现首次加载特别的缓慢要几十秒才加载出来,完全没有在本地开发环境上那么流畅. 主要原因是页面在打包后没有进行相关的配置导致资源文件特别大,一次想要全部加载完成回特别 ...

  4. vue页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅.主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载 ...

  5. iOS开发图片加载的内存问题及优化方案

    原创作者:Magic-Unique 原文地址:https://github.com/Magic-Unique/HXImage猿吧 - 资源共享论坛: http://www.coderbar.cn 做最 ...

  6. Jquery 页面首次加载方式

    $(document).ready(function(){ alert("111"); }); $(function(){ alert("222"); }); ...

  7. Discuz 页面不能加载插件的原因和解决方法

    模板中,<!--{subtemplate common/headerF}-->这样就不能加载 source/class/class_template.php里65行附近代码 $header ...

  8. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  9. 高效开发 Web 单页应用解决方案

    于 2017 年初,有在 Github 建立并维护一个项目:Vue Boilerplate Template,欲成就一款开箱即用 Vue + Webpack 的脚手架模版:其目标与宗旨是:根据以往经验 ...

随机推荐

  1. Datatable数据转换成excel导出时 数值类型在EXCEL中为文本形式 无法进行统计

    功能背景 有地税上以及各企业的一个缴费情况的比对,基于两表进行匹配查看数据是否在合理范围内,对比对完成表进行数值导出. 2.问题描述 匹配和生成匹配结果导出已成功完成,但是在数值列导出后变成了文本形式 ...

  2. The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar报错

    缺少jstl依赖解析xml文件,报错jaspException 添加依赖如下: <dependency>              <groupId>jstl</grou ...

  3. hdu 6127---Hard challenge(思维)

    题目链接 Problem Description There are n points on the plane, and the ith points has a value vali, and i ...

  4. pycharm 安装第三方库报错:AttributeError: 'module' object has no attribute 'main'

    pip升级到 10.0.1 之后 老版的pycharm 使用pip安装第三方库的时候会报错,报错如上图所示: 其主要原因是 新版的 pip 更改了 部分api 将其中 pip.main() 改为 pi ...

  5. python中合并数组的方法

    一.数组纵向合并 1.使用np.vstack()函数 [code] #数组 a = [[1,2,3],[4,5,6]] b = [[1,1,1],[2,2,2]] #纵向合并 c = np.vstac ...

  6. ES6中的proxy

    1 概述 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. Proxy 这个词的原意是代理,用在这 ...

  7. 根据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值.使用mediaquery 可以解决这个问题,但是每一个文件都引用一 ...

  8. PHP-CPP开发扩展(四)

    PHP-CPP是一个用于开发PHP扩展的C++库.本节讲解如何在C++中调用PHP函数. 调用PHP函数 调用普通函数 // call a function from user space Php:: ...

  9. mysql格式化时间戳为日期

    MySQL中有一个像PHP的date函数一样的日期格式化函数DATE_FORMAT,使用这个函数时,需要像下面例子这样传递一个格式字符串和时间戳 SELECT DATE_FORMAT(NOW(),&q ...

  10. Xshell6设置字体大小

    Xshell可以远程连接到linux服务器,但有时终端字体太小,可以按照如下步骤修改字体大小: 菜单栏: 文件-属性-外观,修改字体大小后点击确定即可(也可以使用ALT+P快捷键打开属性).