寫(xiě)在前面

十載的橫縣網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整橫縣建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“橫縣網(wǎng)站設(shè)計(jì)”,“橫縣網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

本文記錄筆者在Vue SPA項(xiàng)目首屏加載優(yōu)化過(guò)程中遇到的一些坑及優(yōu)化方案！

我們以 vue-cli 工具為例，使用 vue-router 搭建SPA應(yīng)用，UI框架選用 element-ui ， ajax方案選用 axios, 并引入vuex ，使用 vuex-router-sync 將 router 同步到 store ，服務(wù)器使用本地Nginx服務(wù)。

構(gòu)建項(xiàng)目

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會(huì)自動(dòng)打開(kāi)瀏覽器，可以看到效果。我們?cè)谌肟谖募幸雟ue-router、element-ui、axios

// src/main.js
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import store from './store'
import router from './router'
import {sync} from 'vuex-router-sync'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

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

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 router,
 template: '',
 components: { App }
})

接下來(lái)我們不做任何修改，使用默認(rèn)的配置進(jìn)行打包，Nginx采用默認(rèn)配置，部署到Nginx，啟動(dòng)Nginx服務(wù)，查看效果：

可以看出，在沒(méi)有開(kāi)發(fā)任何頁(yè)面及功能的情況下，vendor.js 有788kb。如果我們?cè)僖蕾囈恍┢渌膸?kù)，比如 echarts 等，vendor.js 能到 1M 以上。

使用cdn資源

我們要將 vue、 vue-router、 vuex、element-ui 從 vendor.js 中分離出來(lái)，使用CDN資源引入。國(guó)內(nèi)的CDN服務(wù)推薦使用 BootCDN。國(guó)外不是很好用。。。

首先在模板文件index.html中添加以下內(nèi)容：

...

 


 

 
 
 
 
 

修改 build/webpack.base.conf.js。關(guān)于 externals 配置項(xiàng)請(qǐng)自行查閱相關(guān)資料。

module.exports = {
 ...
 externals: {
  'vue': 'Vue',
  'vuex': 'Vuex',
  'vue-router': 'VueRouter',
  'element-ui': 'ElementUI'
 }
 ...
}

修改 src/router/index.js

// import Vue from 'vue'
import 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 './App'
import axios from 'axios'
import store from './store'
import router from './router'
import {sync} from 'vuex-router-sync'
import ELEMENT from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

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

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 router,
 template: '',
 components: { App }
})

注意！這里 element-ui 變量名要使用 ELEMENT，因?yàn)閑lement-ui的 umd 模塊名是 ELEMENT

再次打包，部署到Nginx服務(wù)，可以看到：

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

再看CDN資源：

可以看出，5個(gè)請(qǐng)求共216kb，耗時(shí)619ms！

Nginx 開(kāi)啟 gzip

對(duì) vendor.js 我們優(yōu)化完了，接下來(lái)我們優(yōu)化服務(wù)器上的資源。先看看沒(méi)有開(kāi)啟 gzip 的效果：

可以看到有 13.5kb

Nginx開(kāi)啟gzip，修改nginx配置文件 nginx.conf:

...
http {
  ...
  gzip        on;
  gzip_min_length  1k;
  gzip_buffers    4 16k;
  #gzip_http_version 1.1;
  gzip_comp_level  2; # 壓縮級(jí)別
  # 要壓縮的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
  ...
}

關(guān)于 nginx gzip，請(qǐng)自行查閱相關(guān)資料

重啟nginx服務(wù)，再看效果：

可以看到服務(wù)器上的資源經(jīng)過(guò)gzip壓縮之后有 9kb，壓縮比 13.3%。

總結(jié)

至此，我們初步的優(yōu)化就完成了。我實(shí)際的項(xiàng)目首屏加載從 12s 左右優(yōu)化到 4s 左右。由于是演示項(xiàng)目，并沒(méi)有開(kāi)發(fā)其他的頁(yè)面和功能，效果不是很明顯，大家可以自行踩坑。大家有更好的方案，可以共同學(xué)習(xí)！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。