H5應用優(yōu)化

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

webcc一般要求源代碼使用git管理，通過git命令查詢源文件列表及版本差異，實現(xiàn)增量編譯、自動化發(fā)布等功能。 如果你已用git管理項目，則在項目目錄中打開git-bash(或其它linux shell環(huán)境)，運行命令：

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

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

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

<

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

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

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

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

在示例應用中，我們在index.html中查找webcc，可以看到有這些標記：

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

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

創(chuàng)新互聯(lián)網(wǎng)絡十年從事網(wǎng)站建設、成都微信開發(fā)、APP開發(fā)等業(yè)務，為眾多企業(yè)搭建了自己公眾號，簡單方便用戶管理。我們以科學規(guī)范的流程，勤奮專注的態(tài)度，為客戶提供全方位的設計服務。專注ui設計，以設計驅動企業(yè)價值的持續(xù)增長，實現(xiàn)您的商業(yè)目標！

網(wǎng)頁名稱：H5應用優(yōu)化
分享URL：http://www.bm7419.com/news/70029.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設、網(wǎng)站設計、網(wǎng)站策劃、企業(yè)建站

廣告

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