Vue SPA(單頁應用)首屏優化實踐

林水溶發表於2017-05-09
Vue優化

原文首發：　https://shuirong.github.io/

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. 其他諸如圖片懶載入就不贅述了，前端開發者應該有的常識．

相關文章