H5應用優化

天笑發表於2017-02-20
H5優化

目前我們執行的H5應用直接是在專案下的server目錄中，這稱為開發版本，沒有進行優化。 在生產環境下，一般會將開發版本進行優化，生成釋出版本後上線，可提升H5應用效能。

用webcc編譯H5應用

[任務]

使用webcc工具，編譯專案下的server目錄，生成釋出版本目錄"output_web"。

作為一個WEB應用，釋出時最常見的需求是JS/CSS/HTML檔案合併和壓縮(minify)。 H5應用自身用的index.js/index.css檔案可以內嵌到主檔案index.html中，常用的邏輯頁面（包括html/css檔案）也可以內嵌到index.html中來。

筋斗雲通過名為webcc的工具進行應用優化，也稱為編譯。 本章詳細介紹可參考官方文件"webcc"。

我們先看怎麼執行它。 webcc是php工具，必須先安裝php環境(版本5.4或更高)； 在Windows系統上，建議安裝git，它自帶的git-bash環境模擬了簡單的linux/unix環境，如果已安裝mingw或cygwin也可以。

webcc一般要求原始碼使用git管理，通過git命令查詢原始檔列表及版本差異，實現增量編譯、自動化釋出等功能。 如果你已用git管理專案，則在專案目錄中開啟git-bash(或其它linux shell環境)，執行命令：

$ php tool/webcc.php server

上面server是待編譯的開發版本目錄，裡面有所有開發的內容。執行後生成釋出版本目錄"output_web"。

如果專案未使用git管理，則要求指定原始檔列表，在執行webcc之前必須先設定環境變數WEBCC_LS_CMD，例如：

$ export WEBCC_LS_CMD='find . -type f'

注意：上面命令會將目錄下所有檔案都編譯併發布，應確保清除目錄下無用的檔案。 如果你使用的是svn管理專案，則需要把".svn"目錄過濾掉以免生成到釋出目錄：

$ export WEBCC_LS_CMD='find . -type f | grep -v .svn'

或者使用svn命令精確列表哪些檔案要釋出：

$ export WEBCC_LS_CMD='svn ls -R'

至於編譯生成的釋出目錄和源目錄有哪些不同，下面將講述。

webcc配置解讀

在示例應用的server目錄下，有一個webcc.conf.php的配置檔案，裡面定義了優化策略，一般無需修改：

$RULES = [
    '*.html' => 'HASH',
    ...
];

第一條規則是server目錄下(不包括子目錄)的所有html檔案，即所有H5應用，執行HASH規則，對於html檔案，會處理其中的webcc標記。

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

<!-- WEBCC_BEGIN MERGE=lib 外部庫 {{{-->
    <link rel="stylesheet" href="lib/weui.min.css" />

    <script src="lib/jquery-1.11.1.min.js"></script>
    <script src="lib/jquery.touchSwipe.min.js"></script>
<!-- WEBCC_END }}}-->

<!-- WEBCC_BEGIN MERGE=lib-app 內部庫 {{{-->
    mui.css, app.css等css檔案...
    app_fw.js, app.js等js檔案...
<!-- WEBCC_END }}}-->

<!-- WEBCC_BEGIN MERGE 應用專用 {{{-->
    <link rel="stylesheet" href="index.css" />
    <script src="index.js"></script>
<!-- WEBCC_END }}}-->

...

<!-- WEBCC_BEGIN {{{ embeded pages -->
<!-- WEBCC_USE_THIS
WEBCC_CMD mergePage -minify yes page/home.html page/login.html page/login1.html page/me.html
WEBCC_END }}} -->

先看外部庫、內部庫，它們分別被放置在標記WEBCC_BEGIN MERGE=xxx / WEBCC_END之中。 這意味著其中的css, js檔案會被合併到一起，壓縮後生成一個檔案xxx.js或xxx.css。

外部庫表示第三方庫，如果應用中用到了其它庫，且檔案大小並不大，可以放置到這一塊中，以便多個庫合併成一個檔案優化下載。 內部庫是筋斗雲框架自身及你的專案內所有H5應用的通用部分(app.js, app.css)。

應用專用就是當前H5應用用到的js/css。使用的webcc標記與前面比，沒有指定"MERGE=xxx"，只指定了"MERGE"，這表示合併其中內容到當前檔案，即把index.css/index.js內嵌到index.html檔案中。

最後一塊是內嵌邏輯頁，用"WEBCC_USE_THIS"標記和"mergePage"命令指定了一些邏輯頁，這些頁面一般是最常用的頁面，這個html及其引用的js檔案將被直接內嵌到index.html中。 框架在載入邏輯頁時，如果發現已內建於主html中則優先使用內建頁，否則就觸發缺頁中斷從而遠端載入。

相關文章