脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 首屏优化

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

 更新时间：2018年06月28日 10:06:09   作者：林水溶  
这篇文章主要介绍了Vue SPA单页应用首屏优化实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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
    • 压缩比，压缩比１最小处理速度最快，压缩比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配置文件（生产环境）中已经开启了代码的压缩．

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

在项目中使用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. 其他诸如图片懒加载就不赘述了，前端开发者应该有的常识．

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue使用axios引起的后台session不同操作

    Vue使用axios引起的后台session不同操作

    这篇文章主要介绍了Vue使用axios引起的后台session不同操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 手写实现vue2下拉菜单dropdown组件实例

    手写实现vue2下拉菜单dropdown组件实例

    这篇文章主要为大家介绍了手写vue2下拉菜单dropdown组件实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法

    使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法

    这篇文章主要介绍了如何使用 Vue-TCB 快速在 Vue 应用中接入云开发,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • 在Vue3中为路由Query参数标注类型的方法

    在Vue3中为路由Query参数标注类型的方法

    这篇文章主要介绍了在Vue3中如何为路由Query参数标注类型,我们就针对这个话题如何为路由Query参数标注类型为例,看看Composable和IOC容器的代码风格究竟有什么不同,需要的朋友可以参考下
    2024-08-08
  • 用Vue.extend构建消息提示组件的方法实例

    用Vue.extend构建消息提示组件的方法实例

    本篇文章主要介绍了用Vue.extend构建消息提示组件的方法实例，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • 详解vue2.0的Element UI的表格table列时间戳格式化

    详解vue2.0的Element UI的表格table列时间戳格式化

    本篇文章主要介绍了详解vue2.0的Element UI的表格table列时间戳格式化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-06-06
  • vue3保存属性自动换行问题及解决

    vue3保存属性自动换行问题及解决

    这篇文章主要介绍了vue3保存属性自动换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue多次打包后出现浏览器缓存的问题及解决

    vue多次打包后出现浏览器缓存的问题及解决

    这篇文章主要介绍了vue多次打包后出现浏览器缓存的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 阿望教你用vue写扫雷小游戏

    阿望教你用vue写扫雷小游戏

    这篇文章主要介绍了阿望教你用vue写扫雷小游戏，本文通过实例代码效果图展示的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue实现简单选项卡效果

    Vue实现简单选项卡效果

    这篇文章主要为大家详细介绍了Vue实现简单选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论