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-kitnpm installnpm install vuex element-ui axios -Snpm run devvue-cli会自动打开浏览器,可以看到效果。我们在入口文件中引入vue-router
、element-ui
、axios
// src/main.jsimport babel-polyfillimport Vue from vueimport App from ./App
import axios from axios
import store from ./storeimport router from ./routerimport {sync} from vuex-router-syncimport ElementUI from element-uiimport element-ui/lib/theme-chalk/index.cssVue.config.productionTip = falseVue.use(ElementUI)Vue.prototype.$http = axiossync(store, router)/* eslint-disable no-new */
new Vue({ el: #app, store, router, template: <App/>, 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"></head><body> <div id="app"></div>
<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: {
vue: Vue,
vuex: Vuex, vue-router: VueRouter, element-ui: ELEMENT } ...}修改src/router/index.js
// import Vue from vueimport VueRouter from vue-router
// 注释掉
// Vue.use(VueRouter)...修改src/store/index.js
...// 注释掉// Vue.use(Vuex)...修改 src/main.js
import babel-polyfill
import Vue from vue
import App from ./Appimport axios from axiosimport store from ./storeimport router from ./routerimport {sync} from vuex-router-syncimport ELEMENT from element-ui// import element-ui/lib/theme-chalk/index.cssVue.config.productionTip = falseVue.use(ELEMENT)Vue.prototype.$http = axios
sync(store, router)/* eslint-disable no-new */new Vue({ el: #app, store, router, template: <App/>, 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.5kbNginx开启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服务,再看效果: