国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wall2flower / 3410人閱讀

摘要：原文首發(fā)代碼壓縮如果你用的是服務(wù)器，請修改配置文件其他類似在里加入開啟或者關(guān)閉模塊，這里使用表示啟動(dòng)設(shè)置允許壓縮的頁面最小字節(jié)數(shù)默認(rèn)值是，不管頁面多大都壓縮設(shè)置系統(tǒng)獲取幾個(gè)單位的緩存用于存儲的壓縮結(jié)果數(shù)據(jù)流代表以為單位，按照原始數(shù)據(jù)大

原文首發(fā)：　https://shuirong.github.io/
1.代碼壓縮(gzip)

如果你用的是nginx服務(wù)器，請修改配置文件(其他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，不管頁面多大都壓縮．

gzip_buffers

設(shè)置系統(tǒng)獲取幾個(gè)單位的緩存用于存儲gzip的壓縮結(jié)果數(shù)據(jù)流．4 16k 代表以 16k 為單位，按照原始數(shù)據(jù)大小以 16k 為單位的4倍申請內(nèi)存

gzip_comp_level

壓縮比，壓縮比１最小處理速度最快，壓縮比9最大但處理最慢（傳輸快但比較消耗cpu）

gzip_types

匹配MIME類型進(jìn)行壓縮，（無論是否指定）"text/html" 類型總是會被壓縮

我這樣配置，把首頁一個(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對我來說就很沒必要了．

所以我就封裝個(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

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

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

4. 路由組件懶加載

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

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

我們要做的就是把路由對應(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)槟悴粫憶]用到的代碼．規(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文檔中簡單看了一邊，打算以后有需求了再搞不遲．

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86991.html

相關(guān)文章

  • 用vue從零開發(fā)和部署一款移動(dòng)端pwa單頁應(yīng)用

    摘要：另外，單頁應(yīng)用因?yàn)閿?shù)據(jù)前置到了前端，不利于搜索引擎的抓取。所以我們需要對自己的單頁應(yīng)用進(jìn)行一些優(yōu)化。 前言 最近秋招之余空出時(shí)間來按自己的興趣動(dòng)手做了一個(gè)項(xiàng)目，一個(gè)基于vue-cli3.0, vue，typescript的移動(dòng)端pwa，現(xiàn)在趁熱打鐵，將這個(gè)項(xiàng)目從開發(fā)到部署整個(gè)過程記錄下來，并將從這個(gè)項(xiàng)目中學(xué)習(xí)到的東西分享出來，如果大家有什么意見或補(bǔ)充也可以在評論區(qū)提出。先介紹一下這個(gè)項(xiàng)...

    Channe 評論0 收藏0

  • 珠峰前端架構(gòu)師培養(yǎng)計(jì)劃

    摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開發(fā)實(shí)踐經(jīng)驗(yàn)相關(guān)字眼。我們主要從端公眾號移動(dòng)端小程序三大平臺進(jìn)行前端的技術(shù)選型，并來說說選其技術(shù)的幾大優(yōu)勢。技術(shù)的優(yōu)勢互聯(lián)網(wǎng)前端大潮后，前端出現(xiàn)了大框架，分別是與。 1、技術(shù)選型的背景前端技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)上出現(xiàn)的新型框架也比較多，如何讓新招聘的人員...

    ccj659 評論0 收藏0

  • vue首屏加載優(yōu)化

    摘要：為了讓事情更簡單，允許將組件定義為一個(gè)工廠函數(shù)，動(dòng)態(tài)地解析組件的定義。只在組件需要渲染時(shí)觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來，用于后面的再次渲染。 庫使用情況 vue vue-router axios muse-ui material-icons vue-baidu-map 未優(yōu)化前 首先我們在正常情況下buildshowImg(https://segmentfault.com/img...

    Kaede 評論0 收藏0

  • 為了vue-cli spa項(xiàng)目優(yōu)化首屏所做的事情

    摘要：第一次寫項(xiàng)目，但是在實(shí)踐的過程發(fā)現(xiàn)了很多坑，這篇文章主要講述的是項(xiàng)目首屏加載過慢的大坑。建議使用，相對來說算是比較快的了。在官方文檔中有相關(guān)實(shí)現(xiàn)的代碼，很簡單。畢竟首屏加載，優(yōu)化都得靠了。 第一次寫 vue spa項(xiàng)目，但是在實(shí)踐的過程發(fā)現(xiàn)了很多坑，這篇文章主要講述的是spa項(xiàng)目首屏加載過慢的大坑。在webpack的配置中，在打包的過程中，會將所有的庫都打包到vendor.js中，所以...

    layman 評論0 收藏0

  • VUE單頁應(yīng)用首屏加載速度優(yōu)化方案

    摘要：所以前端使用壓縮是沒有起作用的。影響，選項(xiàng)顯示警告在刪除沒有用到的代碼時(shí)不輸出警告刪除所有的語句還可以兼容瀏覽器內(nèi)嵌定義了但是只用到一次的變量提取出出現(xiàn)多次但是沒有定義成變量去引用的靜態(tài)值此方法有待實(shí)踐，留待下次分享 單頁應(yīng)用會隨著項(xiàng)目越大，導(dǎo)致首屏加載速度很慢！！！以下給出在下知道的幾種優(yōu)化方案 使用CDN資源,減小服務(wù)器帶寬壓力 路由懶加載 將一些靜態(tài)js css放到其他地方（如...

    lewif 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<