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

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