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里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
window.location.hash知识汇总
Nov 09 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
前端JavaScript大管家 package.json
Nov 02 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
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python实现超市扫码仪计费
2018/05/30 Python
python求最大连续子数组的和
2018/07/07 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
python 写一个水果忍者游戏
2021/01/13 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
单位在职证明范本
2014/01/09 职场文书
个性与发展自我评价
2014/02/11 职场文书
新教师工作感言
2014/02/16 职场文书
共产党员公开承诺书
2014/03/25 职场文书
合作协议书
2014/04/23 职场文书
2015年母亲节寄语
2015/03/23 职场文书
求职自我推荐信
2015/03/24 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
公司业务员管理制度
2015/08/05 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS