? ? ? ?目前我們運(yùn)行的H5應(yīng)用直接是在項(xiàng)目下的server目錄中，這稱為開發(fā)版本，沒(méi)有進(jìn)行優(yōu)化。 在生產(chǎn)環(huán)境下，一般會(huì)將開發(fā)版本進(jìn)行優(yōu)化，生成發(fā)布版本后上線，可提升H5應(yīng)用性能。
? ? ? ?用webcc編譯H5應(yīng)用
? ? ? ?[任務(wù)]
? ? ? ?使用webcc工具，編譯項(xiàng)目下的server目錄，生成發(fā)布版本目錄"output_web"。
? ? ? ?作為一個(gè)WEB應(yīng)用，發(fā)布時(shí)最常見(jiàn)的需求是JS/CSS/HTML文件合并和壓縮(minify)。 H5應(yīng)用自身用的index.js/index.css文件可以內(nèi)嵌到主文件index.html中，常用的邏輯頁(yè)面（包括html/css文件）也可以內(nèi)嵌到index.html中來(lái)。
? ? ? ?筋斗云通過(guò)名為webcc的工具進(jìn)行應(yīng)用優(yōu)化，也稱為編譯。 接下來(lái)詳細(xì)介紹可參考官方文檔"webcc"。
? ? ? ?我們先看怎么運(yùn)行它。 webcc是php工具，必須先安裝php環(huán)境(版本5.4或更高)； 在Windows系統(tǒng)上，建議安裝git，它自帶的git-bash環(huán)境模擬了簡(jiǎn)單的linux/unix環(huán)境，如果已安裝mingw或cygwin也可以。

? ? ? ?webcc一般要求源代碼使用git管理，通過(guò)git命令查詢?cè)次募斜砑鞍姹静町悾瑢?shí)現(xiàn)增量編譯、自動(dòng)化發(fā)布等功能。 如果你已用git管理項(xiàng)目，則在項(xiàng)目目錄中打開git-bash(或其它linux shell環(huán)境)，運(yùn)行命令：

? ? ? ?上面server是待編譯的開發(fā)版本目錄，里面有所有開發(fā)的內(nèi)容。運(yùn)行后生成發(fā)布版本目錄"output_web"。
? ? ? ?如果項(xiàng)目未使用git管理，則要求指定源文件列表，在運(yùn)行webcc之前

? ? ? ?必須先設(shè)置環(huán)境變量WEBCC_LS_CMD，例如：

? ? ? ?注意：上面命令會(huì)將目錄下所有文件都編譯并發(fā)布，應(yīng)確保清除目錄下無(wú)用的文件。 如果你使用的是svn管理項(xiàng)目，則需要把".svn"目錄過(guò)濾掉以免生成到 ? ? ? 發(fā)布目錄：

? ? ? ?或者使用svn命令精確列表哪些文件要發(fā)布：

? ? ? ?至于編譯生成的發(fā)布目錄和源目錄有哪些不同，下面將講述。
? ? ? ?webcc配置解讀

? ? ? ?在示例應(yīng)用的server目錄下，有一個(gè)webcc.conf.php的配置文件，里面定義了優(yōu)化策略，一般無(wú)需修改：

? ? ? ?第一條規(guī)則是server目錄下(不包括子目錄)的所有html文件，即所有H5應(yīng)用，執(zhí)行HASH規(guī)則，對(duì)于html文件，會(huì)處理其中的webcc標(biāo)記。

? ? ? ?在示例應(yīng)用中，我們?cè)趇ndex.html中查找webcc，可以看到有這些標(biāo)記：

? ? ? ?先看外部庫(kù)、內(nèi)部庫(kù)，它們分別被放置在標(biāo)記WEBCC_BEGIN MERGE=xxx / WEBCC_END之中。 這意味著其中的css, js文件會(huì)被合并到一起，壓縮后生成一個(gè)文件xxx.js或xxx.css。
? ? ? ?外部庫(kù)表示第三方庫(kù)，如果應(yīng)用中用到了其它庫(kù)，且文件大小并不大，可以放置到這一塊中，以便多個(gè)庫(kù)合并成一個(gè)文件優(yōu)化下載。 內(nèi)部庫(kù)是筋斗云框架自身及你的項(xiàng)目?jī)?nèi)所有H5應(yīng)用的通用部分(app.js, app.css)。
? ? ? ?應(yīng)用專用就是當(dāng)前H5應(yīng)用用到的js/css。使用的webcc標(biāo)記與前面比，沒(méi)有指定"MERGE=xxx"，只指定了"MERGE"，這表示合并其中內(nèi)容到當(dāng)前文件，即把index.css/index.js內(nèi)嵌到index.html文件中。

? ? ? ?最后一塊是內(nèi)嵌邏輯頁(yè)，用"WEBCC_USE_THIS"標(biāo)記和"mergePage"命令指定了一些邏輯頁(yè)，這些頁(yè)面一般是最常用的頁(yè)面，這個(gè)html及其引用的js文件將被直接內(nèi)嵌到index.html中。 框架在加載邏輯頁(yè)時(shí)，如果發(fā)現(xiàn)已內(nèi)置于主html中則優(yōu)先使用內(nèi)置頁(yè)，否則就觸發(fā)缺頁(yè)中斷從而遠(yuǎn)程加載。

? ? ? ?百恒網(wǎng)絡(luò)十年從事網(wǎng)站建設(shè)、南昌微信開發(fā)、APP開發(fā)等業(yè)務(wù)，為眾多企業(yè)搭建了自己公眾號(hào)，簡(jiǎn)單方便用戶管理。我們以科學(xué)規(guī)范的流程，勤奮專注的態(tài)度，為客戶提供全方位的設(shè)計(jì)服務(wù)。專注ui設(shè)計(jì)，以設(shè)計(jì)驅(qū)動(dòng)企業(yè)價(jià)值的持續(xù)增長(zhǎng)，實(shí)現(xiàn)您的商業(yè)目標(biāo)！