vuespaphp,在Vue中有关SPA首屏加载优化（详细教程）

本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践&＃xff0c;小编觉得挺不错的&＃xff0c;现在分享给大家&＃xff0c;也给大家做个参考。一起跟随小编过来看看吧

写在前面

本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案&＃xff01;

我们以 vue-cli 工具为例&＃xff0c;使用 vue-router 搭建SPA应用&＃xff0c;UI框架选用 element-ui &＃xff0c; ajax方案选用 axios, 并引入vuex &＃xff0c;使用 vuex-router-sync 将 router 同步到 store &＃xff0c;服务器使用本地Nginx服务。

构建项目vue-init webpack vue-spa-starter-kit

cd vue-spa-starter-kit

npm install

npm install vuex element-ui axios -S

npm run dev

vue-cli会自动打开浏览器&＃xff0c;可以看到效果。我们在入口文件中引入vue-router、element-ui、axios// src/main.js

import &＃39;babel-polyfill&＃39;

import Vue from &＃39;vue&＃39;

import App from &＃39;./App&＃39;

import axios from &＃39;axios&＃39;

import store from &＃39;./store&＃39;

import router from &＃39;./router&＃39;

import {sync} from &＃39;vuex-router-sync&＃39;

import ElementUI from &＃39;element-ui&＃39;

import &＃39;element-ui/lib/theme-chalk/index.css&＃39;

Vue.config.productionTip &＃61; false

Vue.use(ElementUI)

Vue.prototype.$http &＃61; axios

sync(store, router)

/* eslint-disable no-new */

new Vue({

el: &＃39;#app&＃39;,

store,

router,

template: &＃39;&＃39;,

components: { App }

})

接下来我们不做任何修改&＃xff0c;使用默认的配置进行打包&＃xff0c;Nginx采用默认配置&＃xff0c;部署到Nginx&＃xff0c;启动Nginx服务&＃xff0c;查看效果&＃xff1a;

可以看出&＃xff0c;在没有开发任何页面及功能的情况下&＃xff0c;vendor.js 有788kb。如果我们再依赖一些其他的库&＃xff0c;比如 echarts 等&＃xff0c;vendor.js 能到 1M 以上。

使用CDN资源

我们要将 vue、 vue-router、 vuex、element-ui 从 vendor.js 中分离出来&＃xff0c;使用CDN资源引入。国内的CDN服务推荐使用 BootCDN。国外不是很好用。。。

首先在模板文件index.html中添加以下内容&＃xff1a;...

修改 build/webpack.base.conf.js。关于 externals 配置项请自行查阅相关资料。module.exports &＃61; {

...

externals: {

&＃39;vue&＃39;: &＃39;Vue&＃39;,

&＃39;vuex&＃39;: &＃39;Vuex&＃39;,

&＃39;vue-router&＃39;: &＃39;VueRouter&＃39;,

&＃39;element-ui&＃39;: &＃39;ElementUI&＃39;

}

...

}

修改 src/router/index.js// import Vue from &＃39;vue&＃39;

import VueRouter from &＃39;vue-router&＃39;

// 注释掉

// Vue.use(VueRouter)

...

修改 src/store/index.js...

// 注释掉

// Vue.use(Vuex)

...

修改 src/main.jsimport &＃39;babel-polyfill&＃39;

import Vue from &＃39;vue&＃39;

import App from &＃39;./App&＃39;

import axios from &＃39;axios&＃39;

import store from &＃39;./store&＃39;

import router from &＃39;./router&＃39;

import {sync} from &＃39;vuex-router-sync&＃39;

import ELEMENT from &＃39;element-ui&＃39;

// import &＃39;element-ui/lib/theme-chalk/index.css&＃39;

Vue.config.productionTip &＃61; false

Vue.use(ELEMENT)

Vue.prototype.$http &＃61; axios

sync(store, router)

/* eslint-disable no-new */

new Vue({

el: &＃39;#app&＃39;,

store,

router,

template: &＃39;&＃39;,

components: { App }

})

注意&＃xff01;这里 element-ui 变量名要使用 ELEMENT&＃xff0c;因为element-ui的 umd 模块名是 ELEMENT

再次打包&＃xff0c;部署到Nginx服务&＃xff0c;可以看到&＃xff1a;

vendor.js 减少到了 112kb&＃xff0c;提升85.5%&＃xff01;

再看CDN资源&＃xff1a;

可以看出&＃xff0c;5个请求共216kb&＃xff0c;耗时619ms&＃xff01;

Nginx 开启 gzip

对 vendor.js 我们优化完了&＃xff0c;接下来我们优化服务器上的资源。先看看没有开启 gzip 的效果&＃xff1a;

可以看到有 13.5kb

Nginx开启gzip&＃xff0c;修改nginx配置文件 nginx.conf:...

http {

...

gzip on;

gzip_min_length 1k;

gzip_buffers 4 16k;

#gzip_http_version 1.1;

gzip_comp_level 2; # 压缩级别

# 要压缩的mine类型

gzip_types text/plain application/Javascript application/x-Javascript text/Javascript text/css application/xml application/xml&＃43;rss image/jpeg image/gif image/png image/svg&＃43;xml;

gzip_vary off;

gzip_proxied expired no-cache no-store private auth;

gzip_disable "MSIE [1-6]\."; # IE6不支持gzip

...

}

关于 nginx gzip&＃xff0c;请自行查阅相关资料

重启nginx服务&＃xff0c;再看效果&＃xff1a;

可以看到服务器上的资源经过gzip压缩之后有 9kb&＃xff0c;压缩比 13.3%。

总结

至此&＃xff0c;我们初步的优化就完成了。我实际的项目首屏加载从 12s 左右优化到 4s 左右。由于是演示项目&＃xff0c;并没有开发其他的页面和功能&＃xff0c;效果不是很明显&＃xff0c;大家可以自行踩坑。大家有更好的方案&＃xff0c;可以共同学习&＃xff01;

上面是我整理给大家的&＃xff0c;希望今后会对大家有帮助。

相关文章&＃xff1a;