日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何高效地管理網(wǎng)站靜態(tài)資源

背景

隨著互聯(lián)網(wǎng)開發(fā)和迭代速度越來越快，網(wǎng)站也變得越來越龐大，存在大量靜態(tài)資源，我們原有管理靜態(tài)資源的方式變得越來越不適用，就如同封面圖一樣，靜態(tài)資源之間的關(guān)系錯綜復(fù)雜，給工程師帶來了很多麻煩：

成都創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、從江網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為從江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

  • 人工管理依賴的噩夢，工程師需要頻繁管理和維護(hù)每個頁面需要的 JS & CSS 文件，包括靜態(tài)資源之間的依賴關(guān)系以及加載順序等。
  • 性能優(yōu)化成本高且不可持續(xù)性，為了提高網(wǎng)站性能，工程師總是在忙于優(yōu)化頁面靜態(tài)資源的加載，包括動態(tài)加載靜態(tài)資源、按需加載靜態(tài)資源和修改靜態(tài)資源合并策略等，但是過了一段時間性能又降下來了，又需要周而復(fù)始的重復(fù)。
  • 靜態(tài)資源差異化的挑戰(zhàn)，PC和無線的適配，不同的網(wǎng)絡(luò)和終端需要適配相應(yīng)的靜態(tài)資源；當(dāng)網(wǎng)站需要支持國際化的時候，需要對不同的國家進(jìn)行差異化處理，返回不同的靜態(tài)資源，這些需求對原有的靜態(tài)資源管理方式提出巨大挑戰(zhàn)。
  • 缺少快速迭代和試驗新功能的有效支持，從開發(fā)到上線流程繁瑣，導(dǎo)致項目迭代周期長

每天工程師都會提交大量的 new feature/bug fixes，每次項目發(fā)布和迭代都面臨著以上的問題，是否可以有一套系統(tǒng)幫助我們管理/調(diào)度靜態(tài)資源來減少人工管理靜態(tài)資源成本和風(fēng)險，來達(dá)到更快、更可靠、低成本的自動化項目交付。在實際項目開發(fā)中，我們進(jìn)行了大量探索和試驗，實現(xiàn)了一套 “靜態(tài)資源管理系統(tǒng)”，對靜態(tài)資源進(jìn)行全流程的管理和調(diào)度：

  • 幫助工程師管理靜態(tài)資源間的依賴以及資源的加載
  • 管理靜態(tài)資源版本更新與緩存，自動處理CDN
  • 自動生成最優(yōu)的靜態(tài)資源合并策略，實現(xiàn)網(wǎng)站自適應(yīng)優(yōu)化
  • 實現(xiàn)靜態(tài)資源的分級發(fā)布，快速迭代，輕松回滾
  • 根據(jù)國際化和終端的差異，送達(dá)不同的資源給不同的用戶

下面本文將會介紹我們是如何通過靜態(tài)資源系統(tǒng)來高效管理靜態(tài)資源的。

架構(gòu)

靜態(tài)資源管理系統(tǒng)主要包含Compile、Sourcemap、Backend-Framework、Frontend-Loader幾個核心模塊：

  • Compile，對靜態(tài)資源進(jìn)行編譯處理，包括對靜態(tài)資源進(jìn)行預(yù)處理，url 處理(添加md5戳、添加CDN前綴)，優(yōu)化(壓縮、合并)，生成 Sourcemap 等
  • Sourcemap，在 compile 階段系統(tǒng)會掃描靜態(tài)資源，建立一張靜態(tài)資源關(guān)系表，記錄每個靜態(tài)資源的部署路徑以及依賴關(guān)系等信息
  • Backend-Framework，后端運(yùn)行時根據(jù)組件使用情況來調(diào)度靜態(tài)資源，為前端返回頁面渲染需要的資源。
  • Frontend-Loader，前端運(yùn)行時根據(jù)用戶的交互行為動態(tài)請求靜態(tài)資源。

靜態(tài)資源管理系統(tǒng)通過自動化工具對靜態(tài)資源進(jìn)行預(yù)處理并產(chǎn)出 Sourcemap，SourceMap 中記錄著靜態(tài)資源的調(diào)度信息，這樣框架在運(yùn)行時會根據(jù) SourceMap 中提供的調(diào)度信息自動為用戶進(jìn)行靜態(tài)資源調(diào)度，不僅可以做到送達(dá)不同資源給不同用戶，還可以自適應(yīng)優(yōu)化靜態(tài)資源合并和加載。

自動管理靜態(tài)資源依賴

靜態(tài)資源管理系統(tǒng)為工程師提供了聲明依賴關(guān)系的語法和規(guī)則，在 compile 階段系統(tǒng)會掃描靜態(tài)資源，建立一張靜態(tài)資源關(guān)系表，記錄每個靜態(tài)資源的部署路徑以及依賴關(guān)系等信息。

在html中聲明依賴

在項目的 index.html 里使用注釋聲明依賴關(guān)系：

 
 
      
  
  1.  
    2.

在 SourceMap 中則可看到：

 
 
      
  
  1. {  
    2.   
  
  2.     "res" : {  
    3.   
  
  3.         "demo.css" : {  
    4.   
  
  4.             "uri" : "/static/css/demo_7defa41.css",  
    5.   
  
  5.             "type" : "css"  
    6.   
  
  6.         },  
    7.   
  
  7.         "demo.js" : {  
    8.   
  
  8.             "uri" : "/static/js/demo_33c5143.js",  
    9.   
  
  9.             "type" : "js",  
    10.   
  
  10.             "deps" : [ "demo.css" ]  
    11.   
  
  11.         },  
    12.   
  
  12.         "index.html" : {  
    13.   
  
  13.             "uri" : "/index.html",  
    14.   
  
  14.             "type" : "html",  
    15.   
  
  15.             "deps" : [ "demo.js", "demo.css" ]  
    16.   
  
  16.         }  
    17.   
  
  17.     },  
    18.   
  
  18.     "pkg" : {}  
    19.   
  
  19. }  
    20.   
  
  20.  
    21.

在js中聲明依賴

支持識別 js 文件中的 require 函數(shù)，或者 注釋中的 @require 字段 標(biāo)記的依賴關(guān)系，這些分析處理對 html 的 script 標(biāo)簽內(nèi)容 同樣有效。

 
 
      
  
  1. //demo.js  
    2.   
  
  2. /**  
    3.   
  
  3.  * @require demo.css  
    4.   
  
  4.  * @require list.js  
    5.   
  
  5.  */  
    6.   
  
  6. var $ = require('jquery');  
    7.   
  
  7.  
    8.

在SourceMap中則可看到：

 
 
      
  
  1. {  
    2.   
  
  2.     "res" : {  
    3.   
  
  3.         ...  
    4.   
  
  4.         "demo.js" : {  
    5.   
  
  5.             "uri" : "/static/js/demo_33c5143.js",  
    6.   
  
  6.             "type" : "js",  
    7.   
  
  7.             "deps" : [ "demo.css", "list.js", "jquery" ]  
    8.   
  
  8.         },  
    9.   
  
  9.         ...  
    10.   
  
  10.     },  
    11.   
  
  11.     "pkg" : {}  
    12.   
  
  12. }  
    13.   
  
  13.  
    14.

在css中聲明依賴

支持識別 css 文件 注釋中的 @require 字段 標(biāo)記的依賴關(guān)系，這些分析處理對 html 的 style 標(biāo)簽內(nèi)容 同樣有效。

 
 
      
  
  1. //demo.js  
    2.   
  
  2. /**  
    3.   
  
  3.  * @require demo.css  
    4.   
  
  4.  * @require list.js  
    5.   
  
  5.  */  
    6.   
  
  6. var $ = require('jquery');  
    7.   
  
  7.  
    8.

在SourceMap中則可看到：

 
 
      
  
  1. {  
    2.   
  
  2.     "res" : {  
    3.   
  
  3.         ...  
    4.   
  
  4.         "demo.js" : {  
    5.   
  
  5.             "uri" : "/static/js/demo_33c5143.js",  
    6.   
  
  6.             "type" : "js",  
    7.   
  
  7.             "deps" : [ "demo.css", "list.js", "jquery" ]  
    8.   
  
  8.         },  
    9.   
  
  9.         ...  
    10.   
  
  10.     },  
    11.   
  
  11.     "pkg" : {}  
    12.   
  
  12. }  
    13.   
  
  13.  
    14.

#p#

按需加載靜態(tài)資源

在靜態(tài)資源管理系統(tǒng)接管了項目中的靜態(tài)資源后，可以知道靜態(tài)資源的運(yùn)行情況以及依賴關(guān)系，然后可以做到自動為頁面按需加載靜態(tài)資源，下面通過一個例子來詳細(xì)講解：

sidebar.tpl 中的內(nèi)容如下，

 
 
      
  
  1.  
    2.   
  
  2.  
    3.   
  
  3.  
    4.   
  
  4.      
    5.   
  
  5.      
    6.   
  
  6.      
    7.   
  
  7.  
    8.   
  
  8.  
    9.   
  
  9. {script}  
    10.   
  
  10.     var sidebar = require("common:ui/dialog/dialog.js");  
    11.   
  
  11.     sidebar.run();  
    12.   
  
  12. {/script}  
    13.   
  
  13.  
    14.   
  
  14. {script}  
    15.   
  
  15.     $('a.btn-navbar').click(function() {  
    16.   
  
  16.         require.async('common:ui/dialog/dialog.async.js', function( dialog ) {  
    17.   
  
  17.             dialog.run();  
    18.   
  
  18.         });  
    19.   
  
  19.     });  
    20.   
  
  20. {/script}  
    21.   
  
  21.  
    22.

對項目編譯后，自動化工具會分析依賴關(guān)系，并生成 sourcemap，如下

 
 
      
  
  1. "common:widget/sidebar/sidebar.tpl": {  
    2.   
  
  2.     "uri": "common/widget/sidebsr/sidebar.tpl",  
    3.   
  
  3.     "type": "tpl",  
    4.   
  
  4.     "extras": {  
    5.   
  
  5.         "async": [  
    6.   
  
  6.             "common:ui/dialog/dialog.async.js"  
    7.   
  
  7.         ]  
    8.   
  
  8.     },  
    9.   
  
  9.     "deps": [  
    10.   
  
  10.         "common:ui/dialog/dialog.js",  
    11.   
  
  11.         "common:ui/dialog/dialog.css"  
    12.   
  
  12.     ]  
    13.   
  
  13. }  
    14.   
  
  14.  
    15.

在 sidebar 模塊被調(diào)用后，靜態(tài)資源管理系統(tǒng)通過查詢 sourcemap 可以得知，當(dāng)前 sidebar 模塊同步依賴 sidebar.js、sidebar.css，異步依賴 sdebar.async.js，在要輸出的 html 前面，生成靜態(tài)資源外鏈，我們得到最終的 html

 
 
      
  
  1.  
    2.   
  
  2.  
    3.   
  
  3.  
    4.   
  
  4.      
    5.   
  
  5.      
    6.   
  
  6.      
    7.   
  
  7.  
    8.   
  
  8.  
    9.   
  
  9.  
    10.   
  
  10.  
    11.   
  
  11.  
    12.   
  
  12.  
    13.

如上可見，后端模塊化框架將同步模塊的 script url 統(tǒng)一生成到頁面底部，將 css url 統(tǒng)一生成在 head 中，對于異步模塊(require.async)注冊 resourceMap 代碼，框架會通過 {script} 標(biāo)簽收集到頁面所有 script，統(tǒng)一管理并按順序輸出 script 到相應(yīng)位置。

當(dāng)我們想對模塊進(jìn)行打包，只需要使用一個 pack 配置項，對網(wǎng)站的靜態(tài)資源進(jìn)行打包，這樣在 SourceMap 中，所有被打包的資源會有一個 pkg 屬性指向該表中的資源，而這個資源，正是我們配置的打包策略。這樣靜態(tài)資源系統(tǒng)可以根據(jù)對應(yīng)信息找到某個資源最終被合并后的 package 的 url，最后把這個 url 返回給頁面。

自動合并靜態(tài)資源

靜態(tài)資源管理系統(tǒng)可以根據(jù)產(chǎn)品線上靜態(tài)資源使用的數(shù)據(jù)，自動完成靜態(tài)資源合并工作，對工程師完全透明，解決手工維護(hù)的未及時排除廢棄資源、不可持續(xù)、成本大等問題。

詳情請見 靜態(tài)資源自動合并;

靜態(tài)資源版本更新與緩存

靜態(tài)資源管理系統(tǒng)采用基于文件內(nèi)容的 hash 值來控制靜態(tài)資源的版本更新，如下所示：

 
 
      
  
  1.  
    2.   
  
  2.  
    3.

其中”_82244e91 ”這串字符是根據(jù) a.js 的文件內(nèi)容進(jìn)行 hash 運(yùn)算得到的，只有文件內(nèi)容發(fā)生變化了才會有更改。這樣做的好處有：

  • 線上的 a.js 不是同名文件覆蓋，而是文件名 +hash 的冗余，所以可以先上線靜態(tài)資源，再上線 html 頁面，不存在間隙問題；
  • 遇到問題回滾版本的時候，無需回滾 a.js，只須回滾頁面即可；
  • 由于靜態(tài)資源版本號是文件內(nèi)容的 hash，因此所有靜態(tài)資源可以開啟永久強(qiáng)緩存，只有更新了內(nèi)容的文件才會緩存失效，緩存利用率大增；
  • 修改靜態(tài)資源后會在線上產(chǎn)生新的文件，一個文件對應(yīng)一個版本，因此不會受到構(gòu)造 CDN 緩存形式的攻擊

靜態(tài)資源管理系統(tǒng)會在 compile 階段識別文件中的定位標(biāo)記(url)，計算對應(yīng)文件的 hash，并自動替換為 '文件名 + hash'，無需工程師手動修改。

靜態(tài)資源分級控制

靜態(tài)資源管理系統(tǒng)可以對靜態(tài)資源做進(jìn)一步控制(Controlling Access to Features)以達(dá)到分級發(fā)布的效果，主要包括以下兩塊核心功能,

  • feature flags, 用來控制 feature 對應(yīng)的靜態(tài)資源是否加載
  • feature flippers, 可以靈活控制 feature，不僅僅是 on 或 off, 可以做到類似'3%用戶可以訪問此功能'、'對內(nèi)部所有員工開放' 類似的效果

通過以上的控制我們可以輕松做到發(fā)布一個新功能，讓這個功能只對部分用戶可訪問，當(dāng)功能完善后對所有用戶開放，如果功能出現(xiàn)問題直接一鍵回滾即可。

在項目中的類似代碼如下：

 
 
      
  
  1. {if $config.some eq 'Fred'}  
    2.   
  
  2.     do something new and amazing here.  
    3.   
  
  3. {elseif $config.some eq 'Wilma'}  
    4.   
  
  4.     do the current boring stuff.  
    5.   
  
  5. {else}  
    6.   
  
  6.     whatever you are.  
    7.   
  
  7.  
    8.

靜態(tài)資源管理系統(tǒng)會根據(jù)配置在運(yùn)行時對 $config.some 進(jìn)行干預(yù).實現(xiàn)對靜態(tài)資源的訪問權(quán)控制，通過運(yùn)行時的配置(feature flag)來控制靜態(tài)資源，還可以支持“主干開發(fā)”的方式，來達(dá)到更快的迭代速度。

我們還可以實現(xiàn)國際化的需求，原理同分級發(fā)布，在運(yùn)行時的做一些更細(xì)致的差異化處理

 
 
      
  
  1. {if $lang == 'zh-CN'}  
    2.   
  
  2.     zh-CN  
    3.   
  
  3. {/if}  
    4.   
  
  4.  
    5.

總結(jié)

靜態(tài)資源管理系統(tǒng)的核心是對靜態(tài)資源進(jìn)行調(diào)度，可以很靈活的適應(yīng)各種性能優(yōu)化和差異化處理的場景，來達(dá)到更快、更可靠、低成本的自動化項目交付。但是同時這個系統(tǒng)十分復(fù)雜，承載著各種職責(zé)，這個系統(tǒng)本身會成為整個網(wǎng)站的關(guān)鍵節(jié)點和瓶頸。

作者：walter (http://weibo.com/u/1916384703) - F.I.S


分享題目：如何高效地管理網(wǎng)站靜態(tài)資源
本文路徑：http://www.5511xx.com/article/dhgjpcg.html