VueSPA單頁應(yīng)用首屏優(yōu)化實(shí)踐

1.代碼壓縮(gzip)

創(chuàng)新互聯(lián)專注于靖宇網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供靖宇營(yíng)銷型網(wǎng)站建設(shè)，靖宇網(wǎng)站制作、靖宇網(wǎng)頁設(shè)計(jì)、靖宇網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造靖宇網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供靖宇網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

如果你用的是nginx服務(wù)器，請(qǐng)修改配置文件(其他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
    • 開啟或者關(guān)閉 gzip 模塊，這里使用 on 表示啟動(dòng)
  • gzip_min_length
    • 設(shè)置允許壓縮的頁面最小字節(jié)數(shù)．默認(rèn)值是0，不管頁面多大都?jí)嚎s．
  • gzip_buffers
    • 設(shè)置系統(tǒng)獲取幾個(gè)單位的緩存用于存儲(chǔ)gzip的壓縮結(jié)果數(shù)據(jù)流．4 16k 代表以 16k 為單位，按照原始數(shù)據(jù)大小以 16k 為單位的4倍申請(qǐng)內(nèi)存
  • gzip_comp_level
    • 壓縮比，壓縮比１最小處理速度最快，壓縮比9最大但處理最慢（傳輸快但比較消耗cpu）
  • gzip_types
    • 匹配MIME類型進(jìn)行壓縮，（無論是否指定）"text/html" 類型總是會(huì)被壓縮

我這樣配置，把首頁一個(gè)需要下載的文件由716KB壓縮到了246KB．優(yōu)化比66%．

如果你沒有開啟服務(wù)器端的gzip，也可以開啟前后端代碼的壓縮

如果你后端用的是Express.js框架來提供Web服務(wù)，那么可以使用壓縮中間件進(jìn)行g(shù)zip壓縮．

var compression = require('compression');
var express = require('express');
var app = express();
app.use(compression());

如果你前端是用vue-cli生成的項(xiàng)目，那么在Webpack配置文件（生產(chǎn)環(huán)境）中已經(jīng)開啟了代碼的壓縮．

２. 外部文件按需引入||不用外部文件，自己造輪子

在項(xiàng)目中使用Element的話，按需引入：

首先安裝 babel-plugin-component：

npm install babel-plugin-component -D

它讓我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的.

PS: 如果這時(shí)報(bào)錯(cuò)：

Error: post install error, please remove node_modules before retry

這是cnpm的鍋．原因不詳．解決辦法是換用npm安裝此模塊．(我試過移除node_modules文件，報(bào)錯(cuò)依舊)

如果你用了Ajax相關(guān)的庫，比如vue-resource/axios的話

去掉它，自己實(shí)現(xiàn)一個(gè)Ajax庫吧．

比如我的項(xiàng)目中只涉及了get,post，那么vue-resource/axios對(duì)我來說就很沒必要了．

所以我就封裝個(gè)庫（支持Promise,不支持IE）在Vue中當(dāng)作插件使用：

/* 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,我的這個(gè)xhr.js只有1.9KB．

3．代碼分塊/Code Splitting

顧名思義，就是講代碼分成塊，按需加載．這樣，如果首屏不需要的塊，就不用加載了．

對(duì)于大型項(xiàng)目可能更有用，因?yàn)樵谖业倪@個(gè)項(xiàng)目中首頁需要的文件和其他頁面需要的基本一樣，所以代碼分塊對(duì)我這個(gè)項(xiàng)目而言，就沒必要了．

4. 路由組件懶加載

當(dāng)打包構(gòu)建應(yīng)用時(shí)，Javascript 包會(huì)變得非常大，影響頁面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了

結(jié)合 Vue 的異步組件 和 Webpack 的 code splitting feature,可以輕松實(shí)現(xiàn)路由組件的懶加載．

我們要做的就是把路由對(duì)應(yīng)的組件定義成異步組件：

const Foo = resolve => {
 /* require.ensure 是 Webpack 的特殊語法，用來設(shè)置 code-split point
 （代碼分塊）*/
 require.ensure(['./Foo.vue'], () => {
 resolve(require('./Foo.vue'))
 })
}
/* 另一種寫法 */
const Foo = resolve => require(['./Foo.vue'], resolve);

不需要改變?nèi)魏温酚膳渲?，跟之前一樣使?Foo：

const router = new VueRouter({
 routes: [
 { path: '/foo', component: Foo }
 ]
})

4. Webpack2 Tree-shaking

Tree-shaking 用來消除沒有用到的代碼．

個(gè)人小項(xiàng)目一般用不到tree-shaking．因?yàn)槟悴粫?huì)寫沒用到的代碼．規(guī)模很大的項(xiàng)目或許可以嘗試使用它．

5. 減少XHR中不必要的數(shù)據(jù)．

比如我的項(xiàng)目中，首頁只需要博客Title,id和Tags．Time和Content不需要了，況且Content一般還很大(一般一篇10KB左右)．

6. SSR(Server Side Render/服務(wù)端渲染)

這個(gè)有點(diǎn)難搞．但效果貌似挺不錯(cuò)．我之前在Vue文檔中簡(jiǎn)單看了一邊，打算以后有需求了再搞不遲．

7. 其他諸如圖片懶加載就不贅述了，前端開發(fā)者應(yīng)該有的常識(shí)．

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

網(wǎng)站題目：VueSPA單頁應(yīng)用首屏優(yōu)化實(shí)踐
網(wǎng)站地址：http://muchs.cn/article2/jcghic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)、建站公司、定制網(wǎng)站、、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管