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
    • 压缩比,压缩比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. 其他诸如图片懒加载就不赘述了,前端开发者应该有的常识.

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

(0)

相关推荐

  • vue项目首屏打开速度慢的解决方法

    最近接手了一个后台管理系统,技术栈主要是vue全家桶+elementui,老大打开测试环境页面的时候,说看到首页需要6秒钟,那如何进行优化呢? 首先我们需要安装webpack-bundle-analyzer // webpack.prod.conf.js if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlu

  • 浅谈Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli工具为例,使用 vue-router搭建SPA应用,UI框架选用 element-ui, ajax方案选用 axios, 并引入vuex,使用 vuex-router-sync将 router 同步到 store ,服务器使用本地Nginx服务. 构建项目 vue-init webpack vue-spa-starter-kit cd vue-spa-starter-kit npm ins

  • vue-cli项目优化方法- 缩短首屏加载时间

    最近实习的项目需求上要求不多,就学了下项目优化,主要是首屏加载太慢. 大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件. 安装 npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下,然后npm run dev 的时候默认会在8888端口显示. const BundleAnalyzerPlugin = require('webpac

  • Vue项目使用CDN优化首屏加载问题

    前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验. 解决方法是,将引用的外部js.css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js.外

  • 详解vue-cli 3.0 build包太大导致首屏过长的解决方案

    前言:最近用vue-cli 3.0 构建一个小型的工单管理系统,完工后build发现一个chunk-vendors包就达到985kb,加上其他一些资源文件,首页的下载总共大小快要2M.测试给的第一个反馈就是首屏慢慢慢慢慢! 根据首屏加载资源文件过大,进行一下优化: 1. 路由懒加载 结合Vue的异步组件再结合webpack的代码分割,我们可以轻松的实现路由懒加载. vue-cli 3.0 模式就使用了Babel,我们需要添加 syntax-dynamic-import 插件,才能使 Babel

  • vue-cli 首屏加载优化问题

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js   类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Personal from '@/components/page/Personal' import Message from '@/components/personnal/

  • vuejs项目打包之后的首屏加载优化及打包之后出现的问题

    一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例如不想把vue,axios,vuex,vue-router打包到我们项目中,我们需要这样: 1:打开webpack.base.conf.js module.exports = { externals: { 'vue': 'Vue', 'axios': 'axios', 'vuex': 'Vuex', 'vue-router': 'VueRout

  • Vue服务端渲染实践之Web应用首屏耗时最优化方案

    随着各大前端框架的诞生和演变,SPA开始流行,单页面应用的优势在于可以不重新加载整个页面的情况下,通过ajax和服务器通信,实现整个Web应用拒不更新,带来了极致的用户体验.然而,对于需要SEO.追求极致的首屏性能的应用,前端渲染的SPA是糟糕的.好在Vue 2.0后是支持服务端渲染的,零零散散花费了两三周事件,通过改造现有项目,基本完成了在现有项目中实践了Vue服务端渲染. 关于Vue服务端渲染的原理.搭建,官方文档已经讲的比较详细了,因此,本文不是抄袭文档,而是文档的补充.特别是对于如何与现

  • 浅谈VUE单页应用首屏加载速度优化方案

    单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加载三方资源,如iview,建议按需引入iview中的组件 使用nginx开启gzip减小网络传输的流量大小 webpack开启gzip压缩 若首屏为登录页,可以做成多入口,登录页单独分离为一个入口 使用CDN资源,减小服务器带宽压力 在index.html中引入cdn资源 ... <body> &

  • 浅谈vue首屏加载优化

    本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下: 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' imp

随机推荐