這篇文章主要介紹了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
#壓縮比，壓縮比１最小處理速度最快，壓縮比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設定檔（生產環境）中已經開啟了程式碼的壓縮．
２. 外部文件按需引入||不用外部文件，自己造輪子
在專案中使用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. 其他諸如圖片懶加載就不贅述了，前端開發者應該有的常識．
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
#
以上是Vue SPA單頁應用首屏優化的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
