Rumah > Artikel > hujung hadapan web > 在Vue中有关SPA首屏加载优化（详细教程）

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

亚连asal: 2018-06-20 15:59:072441semak imbas

本篇文章主要介绍了浅谈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 install
npm install vuex element-ui axios -S
npm run dev

vue-cli会自动打开浏览器，可以看到效果。我们在入口文件中引入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 = false

Vue.use(ElementUI)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

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

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

使用CDN资源

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

首先在模板文件index.html中添加以下内容：

...
<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow" >
</head>
<body>
 <p id="app"></p>
 <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
 <!-- built files will be auto injected -->
</body>

修改 build/webpack.base.conf.js。关于 externals 配置项请自行查阅相关资料。

module.exports = {
 ...
 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.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 ELEMENT from &#39;element-ui&#39;
// import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.config.productionTip = false

Vue.use(ELEMENT)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

注意！这里 element-ui 变量名要使用 ELEMENT，因为element-ui的 umd 模块名是 ELEMENT

再次打包，部署到Nginx服务，可以看到：

vendor.js 减少到了 112kb，提升85.5%！

再看CDN资源：

可以看出，5个请求共216kb，耗时619ms！

Nginx 开启 gzip

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

可以看到有 13.5kb

Nginx开启gzip，修改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+rss image/jpeg image/gif image/png image/svg+xml;
  gzip_vary     off;
  gzip_proxied    expired no-cache no-store private auth;
  gzip_disable    "MSIE [1-6]\."; # IE6不支持gzip
  ...
}

关于 nginx gzip，请自行查阅相关资料

重启nginx服务，再看效果：

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

总结

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

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

在JavaScript中如何实现数值自动增加

在React项目中如何使用Redux（详细教程）

在ionic3中如何实现随机布局瀑布流

在JS中如何实现回到顶部效果

在JavaScript中如何实现元素滚动条循环追加内容

Atas ialah kandungan terperinci 在Vue中有关SPA首屏加载优化（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript nginx ajax echarts html webpack 循环 JS ui

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在Angular中有关管道操作符(|)用法Artikel seterusnya：使用VS Code编辑器如何开发AngularJS 2应用程序

Artikel berkaitan

Lihat lagi