摘要：在減少文件請(qǐng)求數(shù)量方面大致有以下三方面合并腳本文件合并樣式文件合并引用的圖片，使用雪碧圖。和的模塊管理不同，前者是基于靜態(tài)的，而后者是動(dòng)態(tài)的。被打包文件的內(nèi)容也已經(jīng)被壓縮混淆，減少了加載文件的。

作者：劉軼斌，騰訊應(yīng)用開發(fā) 工程師
商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系騰訊WeTest獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
原文鏈接：http://wetest.qq.com/lab/view/345.html

此文總結(jié)了筆者在Web靜態(tài)資源方面的一些優(yōu)化經(jīng)驗(yàn)。

用戶在訪問網(wǎng)頁時(shí)， 最直觀的感受就是頁面內(nèi)容出來的速度，我們要做的優(yōu)化工作， 也主要是為了這個(gè)目標(biāo)。那么為了提高頁面加載（或者渲染）速度呢？一般來說有三個(gè)方面：

1、代碼邏輯：優(yōu)秀的代碼邏輯結(jié)構(gòu)可以有效減少渲染頁面使用的內(nèi)存和速度（比如虛擬DOM），此方面不在本文討論范圍內(nèi)。

2、SSR服務(wù)器渲染，也就是所謂的“直出”。將首屏所有內(nèi)容在服務(wù)器端渲染成html靜態(tài)代碼后，直接輸出給瀏覽器，可以有效加快用戶訪問站點(diǎn)時(shí)首屏的加載時(shí)間。不過此方面也不在本文討論范圍內(nèi)。

3、提升靜態(tài)文件的加載速度，這是本文會(huì)討論的點(diǎn)，而這方面大致又可分為下面幾點(diǎn)：

— 加快靜態(tài)文件下載速度

— 減少靜態(tài)文件的文件大小

— 減少靜態(tài)文件請(qǐng)求數(shù)量，從而減少發(fā)起請(qǐng)求的次數(shù)（對(duì)于移動(dòng)端頁面來說，請(qǐng)求的開銷比網(wǎng)速的開銷要大）

最常規(guī)的優(yōu)化手段之一。

我們?cè)谄綍r(shí)開發(fā)的時(shí)候，JS腳本文件和CSS樣式文件中的代碼，都會(huì)依據(jù)一定的代碼規(guī)范（比如javascript-standard-style）來提高項(xiàng)目的可維護(hù)性，以及團(tuán)隊(duì)之間合作的效率。

但是在項(xiàng)目發(fā)布現(xiàn)網(wǎng)后， 這些代碼是給客戶端（瀏覽器）識(shí)別的，此時(shí)代碼的命名規(guī)范、空格縮進(jìn)都已沒有必要，我們可以使用工具將這些代碼進(jìn)行混淆和壓縮，減少靜態(tài)文件的大小

這里我們選擇使用 Webpack，具體會(huì)在后面介紹。

在npm流行的今天，前端在進(jìn)行項(xiàng)目開發(fā)的時(shí)候，往往會(huì)使用很多第三方代碼庫，比如jQuery，axios，weixin-js-sdk，lodash，bootstrap等等，每個(gè)庫都有屬于自己的腳本或者樣式文件。

按照最老的方式的話，我們會(huì)用

這里我們繼續(xù)選擇使用Webpack，具體會(huì)在后面介紹。

我們的文件在壓縮合并之后，文件大小和文件數(shù)量都有了客觀的減少。但是一旦站點(diǎn)業(yè)務(wù)邏輯多了，或者引入的第三方庫多了之后，對(duì)于移動(dòng)端來說，文件大小還是不太樂觀。

這個(gè)時(shí)候就是gzip壓縮登場的時(shí)候啦~我們?cè)趙ebpack的配置中增加gzip壓縮配置：

上面代碼會(huì)對(duì)文件大小大于10240，并且壓縮率好于0.8的js、css文件進(jìn)行g(shù)zip壓縮，執(zhí)行打包代碼后生成結(jié)果文件如下：

我們可以看到除了原有的js和css文件外，我們還得到了壓縮后的gz文件。

把所有這些文件一起部署到服務(wù)器上。（當(dāng)然也可以直接nginx或其他web server配置gzip壓縮）

我們可以看到vendor.[hash].js文件的大小顯著減少，從318kb減少到了不到100kb。

為什么使用CDN?
CDN 是一個(gè)全球（或者只有國內(nèi)，具體看供應(yīng)商）分布式網(wǎng)絡(luò)，它把網(wǎng)站內(nèi)容更快地傳遞給服務(wù)范圍內(nèi)的一個(gè)具體位置，而往往這個(gè)具體的位置離實(shí)際的內(nèi)容服務(wù)器距離很遠(yuǎn)。舉個(gè)極端點(diǎn)的例子，你的網(wǎng)站主機(jī)在愛爾蘭（海南），而你的用戶則在澳大利亞（漠河）訪問。這時(shí)當(dāng)你的用戶訪問你的網(wǎng)站的時(shí)候，延遲會(huì)很大，把你的（靜態(tài)）數(shù)據(jù)用 CDN 放到澳大利亞（漠河）則會(huì)很大程度上提高用戶訪問網(wǎng)站的體驗(yàn)。

如果沒有CDN服務(wù)，我們可以添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存。

web前端對(duì)于xss安全漏洞一定不陌生。我們知道Javascript語句甚至是css表達(dá)式都可能導(dǎo)致xss攻擊，現(xiàn)在很多前端會(huì)使用CSP策略來進(jìn)行腳本源的限制防御。

而我們由于使用的cdn域名和業(yè)務(wù)域名不一樣：
cdn域名：https://cdn.xxx.qq.com
業(yè)務(wù)域名：https://xxx.qq.com

我們可以：

在index.html靜態(tài)入口文件的meta http-equiv頭中做配置；

服務(wù)器端直接返回相應(yīng)的HTTP response header頭信息；

例如：

這里除了指定了cdn的域名源，告訴瀏覽器從這個(gè)域名加載的js文件都是可信的。同時(shí)因?yàn)槲覀兪褂玫膚ebpack打包壓縮代碼后的一些特性，我們還需要加上"unsafe-inline"標(biāo)識(shí)。

使用CSP策略我們可以指定瀏覽器安全解析script、css、fonts、media等資源的源與方式。

參考資料有：

Content Security Policy Reference

Content Security Policy 入門教程

使用webpack2最重要的地方就是使用它tree-shaking的特性。這個(gè)特性對(duì)于ES6的module管理有著非常優(yōu)美的優(yōu)化，大概能減少30%左右的包體積。

ES module和CommonJS的require模塊管理不同，前者是基于靜態(tài)的，而后者是動(dòng)態(tài)的。
CJS：
允許動(dòng)態(tài)同步 require()
導(dǎo)出僅在模塊執(zhí)行后才知道
導(dǎo)出可以在模塊初始化后添加，替換和刪除
ES module：
只允許靜態(tài)同步 import
在模塊執(zhí)行之前，導(dǎo)入和導(dǎo)出已經(jīng)關(guān)聯(lián)
導(dǎo)入和導(dǎo)出是不可變的

現(xiàn)在我們來看一下如何使用webpack：

我們自己寫的代碼因?yàn)樵陂_發(fā)時(shí)需要遵循一定的代碼規(guī)范，所以會(huì)有很多多余的換行和空格字符，甚至是便于閱讀的長變量名，這些其實(shí)對(duì)于機(jī)器（瀏覽器）來說，都不是必要的。所以我們可以把這些都干掉。比如我們寫的代碼可能是這樣的：

接著我們就使用Webpack來進(jìn)行壓縮。首先，需要在工程根目錄的package.json（相信使用過npm包管理的前端同學(xué)一定不陌生）文件中添加webpack的依賴配置：

各個(gè)工程應(yīng)該按需引入需要的loader和webpack-plugin庫。有一點(diǎn)需要注意的是：webpack本身是沒有對(duì)各個(gè)類型的文件進(jìn)行分析處理的能力的，這個(gè)時(shí)候我們需要使用各種第三方庫的loader，比如css-loader等（當(dāng)然我們也可以自己編寫loader）。同時(shí)webpack也有強(qiáng)大的第三方Plugin插件供我們對(duì)文件進(jìn)行進(jìn)一步處理。

接下來我們就可以在scripts中指向的腳本文件里編寫webpack對(duì)應(yīng)的構(gòu)建代碼了。

例如在webpackConfig配置中的plugins屬性數(shù)組中，我們可以添加以下配置：

而最終生成的文件結(jié)構(gòu)如下：

我們可以看到所有樣式代碼被壓縮后抽離到了一個(gè)app.[hash].css文件中，所有js邏輯代碼按照業(yè)務(wù)邏輯和第三方庫被抽離到了app.[hash].js和vendor.[hash].js文件中。

被打包文件的內(nèi)容也已經(jīng)被webpack壓縮混淆，減少了加載文件的Content Size。

關(guān)于其他的webpack用法配置，可以查詢官方文檔和中文文檔，這里就不一一詳細(xì)說明了

目前webpack3 和webpack4使用了新的方式打包代碼，可以進(jìn)一步提升js在瀏覽器中的執(zhí)行效率。

跨域方面: CORS

我們知道由于現(xiàn)代瀏覽器安全策略的不斷完善，對(duì)跨域請(qǐng)求的限制也是各種各樣。

當(dāng)我們保存在靜態(tài)資源文件中的script對(duì)其他域名發(fā)起請(qǐng)求時(shí)就會(huì)遇到跨域問題，如果沒有做任何措施，請(qǐng)求會(huì)被瀏覽器攔截。

當(dāng)前主流的跨域解決方案主要是JSONP和CORS

由表可見，隨著前端不斷發(fā)展，CORS跨域是大趨勢。
CORS需要被請(qǐng)求端根據(jù)請(qǐng)求者的host，與白名單比對(duì)后返回正確的HTTP response header頭信息。

詳情內(nèi)容建議閱讀MDN的官方文檔

為了能夠?qū)η岸藘?yōu)化效果有一個(gè)系統(tǒng)的驗(yàn)證，憑借肉眼來感受頁面響應(yīng)速度肯定是遠(yuǎn)遠(yuǎn)不夠的，我們可以通過一些針對(duì)服務(wù)器性能測試的產(chǎn)品來驗(yàn)證頁面的響應(yīng)時(shí)間，這里推薦一個(gè)“壓測大師”。可以通過配置訪問過程中的最大人數(shù)，獲取訪問后的性能效果，如圖：

騰訊WeTest壓測大師對(duì)包含Web，H5等頁面準(zhǔn)備了針對(duì)性的方案，解決了多數(shù)壓測人員Web頁面壓測的問題。

壓測大師服務(wù)了包括王者榮耀、龍之谷手游、軒轅傳奇手游、火影忍者等多款高星級(jí)手游，也包括QQ、NOW直播等明星產(chǎn)品，通過基于真實(shí)業(yè)務(wù)場景和用戶行為進(jìn)行壓力測試，幫助開發(fā)者發(fā)現(xiàn)服務(wù)器端的性能瓶頸，進(jìn)行針對(duì)性的性能調(diào)優(yōu)，降低服務(wù)器采購和維護(hù)成本。

為了讓外部更多產(chǎn)品能夠享受到簡單易用的壓測產(chǎn)品，騰訊WeTest決定將這份服務(wù)器測試能力產(chǎn)品化，以產(chǎn)品”壓測大師“的形式，正式對(duì)外開放。目前更有低至四折的時(shí)效資源包優(yōu)惠，歡迎大家使用！

點(diǎn)擊鏈接：http://wetest.qq.com/gaps/ 即可使用。

如果對(duì)使用當(dāng)中有任何疑問，歡迎聯(lián)系騰訊WeTest企業(yè)QQ：800024531