Vue SPA单页应用首屏优化实践


Posted in Javascript onJune 28, 2018

1.代码压缩(gzip)

如果你用的是nginx服务器,请修改配置文件(其他web server 类似):sudo nano /etc/nginx/nginx.conf

在Gzip Settings里加入:

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
  • gzip
    • 开启或者关闭 gzip 模块,这里使用 on 表示启动
  • gzip_min_length
    • 设置允许压缩的页面最小字节数.默认值是0,不管页面多大都压缩.
  • gzip_buffers
    • 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流.4 16k 代表以 16k 为单位,按照原始数据大小以 16k 为单位的4倍申请内存
  • gzip_comp_level
    • 压缩比,压缩比1最小处理速度最快,压缩比9最大但处理最慢(传输快但比较消耗cpu)
  • gzip_types
    • 匹配MIME类型进行压缩,(无论是否指定)"text/html" 类型总是会被压缩

我这样配置,把首页一个需要下载的文件由716KB压缩到了246KB.优化比66%.

如果你没有开启服务器端的gzip,也可以开启前后端代码的压缩

如果你后端用的是Express.js框架来提供Web服务,那么可以使用压缩中间件进行gzip压缩.

var compression = require('compression');
var express = require('express');
var app = express();
app.use(compression());

如果你前端是用vue-cli生成的项目,那么在Webpack配置文件(生产环境)中已经开启了代码的压缩.

2. 外部文件按需引入||不用外部文件,自己造轮子

在项目中使用Element的话,按需引入:

首先安装 babel-plugin-component:

npm install babel-plugin-component -D

它让我们可以只引入需要的组件,以达到减小项目体积的目的.

PS: 如果这时报错:

Error: post install error, please remove node_modules before retry

这是cnpm的锅.原因不详.解决办法是换用npm安装此模块.(我试过移除node_modules文件,报错依旧)

如果你用了Ajax相关的库,比如vue-resource/axios的话

去掉它,自己实现一个Ajax库吧.

比如我的项目中只涉及了get,post,那么vue-resource/axios对我来说就很没必要了.

所以我就封装个库(支持Promise,不支持IE)在Vue中当作插件使用:

/* xhr.js */
class XHR {
 get(url) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
   xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
     if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
      if (xhr.responseText) {
       resolve(JSON.parse(xhr.responseText));
      } else {
       resolve(xhr.responseText);
      }
     } else {
      reject(`XHR unsuccessful:${xhr.status}`);
     }
    }
   };
   xhr.open('get', url, true);
   xhr.setRequestHeader('content-type', 'application/json');
   xhr.send(null);
  });
 }

 post(url, data) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
   xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
     if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
      resolve(JSON.parse(xhr.responseText));
     } else {
      reject(`XHR unsuccessful:${xhr.status}`);
     }
    }
   };
   xhr.open('post', url, true);
   xhr.setRequestHeader('content-type', 'application/json');
   xhr.send(JSON.stringify(data));
  });
 }
}

/* Vue插件要求提供install方法:https://cn.vuejs.org/v2/guide/plugins.html */
XHR.install = (Vue) => {
 Vue.prototype.$get = new XHR().get;
 Vue.prototype.$post = new XHR().post;
};

export default XHR;

这种方法一般能缩小文件几十KB.比如vue-resource有35KB,我的这个xhr.js只有1.9KB.

3.代码分块/Code Splitting

顾名思义,就是讲代码分成块,按需加载.这样,如果首屏不需要的块,就不用加载了.

对于大型项目可能更有用,因为在我的这个项目中首页需要的文件和其他页面需要的基本一样,所以代码分块对我这个项目而言,就没必要了.

4. 路由组件懒加载

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了

结合 Vue 的异步组件 和 Webpack 的 code splitting feature,可以轻松实现路由组件的懒加载.

我们要做的就是把路由对应的组件定义成异步组件:

const Foo = resolve => {
 /* require.ensure 是 Webpack 的特殊语法,用来设置 code-split point
 (代码分块)*/
 require.ensure(['./Foo.vue'], () => {
 resolve(require('./Foo.vue'))
 })
}
/* 另一种写法 */
const Foo = resolve => require(['./Foo.vue'], resolve);

不需要改变任何路由配置,跟之前一样使用 Foo:

const router = new VueRouter({
 routes: [
 { path: '/foo', component: Foo }
 ]
})

4. Webpack2 Tree-shaking

Tree-shaking 用来消除没有用到的代码.

个人小项目一般用不到tree-shaking.因为你不会写没用到的代码.规模很大的项目或许可以尝试使用它.

5. 减少XHR中不必要的数据.

比如我的项目中,首页只需要博客Title,id和Tags.Time和Content不需要了,况且Content一般还很大(一般一篇10KB左右).

6. SSR(Server Side Render/服务端渲染)

这个有点难搞.但效果貌似挺不错.我之前在Vue文档中简单看了一边,打算以后有需求了再搞不迟.

7. 其他诸如图片懒加载就不赘述了,前端开发者应该有的常识.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
Webpack的dll功能使用
Jun 28 #Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 #Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 #Javascript
详解ES6中的三种异步解决方案
Jun 28 #Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 #Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 #Javascript
vue如何引入sass全局变量
Jun 28 #Javascript
You might like
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
详解Python 解压缩文件
2019/04/09 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
DTD的含义以及作用
2014/01/26 面试题
学历公证委托书
2014/04/09 职场文书
高二学生评语大全
2014/04/25 职场文书
市政管理求职信范文
2014/05/07 职场文书
大学新生入学教育方案
2014/05/16 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python