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 相关文章推荐
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
原生JS实现萤火虫效果
Mar 07 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
优化PHP程序的方法小结
2012/02/23 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
php7 新增功能实例总结
2020/05/25 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
python中remove函数的踩坑记录
2021/01/04 Python
css sprite简单实例
2016/05/23 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
技术人员面试提纲
2013/11/28 职场文书
安全演讲稿大全
2014/05/09 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
教师创先争优承诺书
2015/04/27 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2015初中团委工作总结
2015/07/28 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS