sencha touch 入門系列 擴展篇之sencha touch 項目打包壓縮

  經常有新手同學抱怨說sencha touch的項目加載速度爲什麼這麼慢,經常要10秒左右的時間甚至更多,

  大家都知道,sencha touch開發的項目中引用了大量的js文件,當我們打開項目時,st的項目會一個一個地加載這些js文件,這樣就造成了項目加載速度慢,如果是web遠程訪問,還會產生大量的http請求影響加載速度,增加服務器壓力。

  所以,我們的項目需要使用sencha cmd來進行打包壓縮,通過sencha cmd打包壓縮的項目,其中引用到的js(app.json中配置的或是項目中通過models、views、controls、requires這些方式引用的js文件)全部合併壓縮成一行js代碼,並且會對代碼中的變量也進行壓縮,大幅度降低js文件的大小,加快js的加載速度,減少http請求,同時它也會對css文件進行壓縮.

  不過要使用sencha cmd工具來打包壓縮項目,前提是你的項目是通過sencha cmd工具創建出來的,因爲cmd工具壓縮項目的時候要讀取項目生成時的一些配置文件,當然你也可以手動去配置這些文件,下面我們以sencha touch 入門系列 (三)sencha touch 項目創建中創建的項目爲例,

我們具體講解下如何打包壓縮sencha touch的項目:

  1.首先打開指令窗口,將路徑定位到你的項目中去,我的項目爲MyFirst, 如圖所示:

  

  接着,我們來執行sencha cmd的打包指令就可以了,

  sencha cmd有4個打包指令,所有的打包命令執行後,默認都會在項目的build文件夾下生成一個對應的文件夾,下面我們來看下指令

  1. sencha app build testing:

  通過指令名稱的testing,大家應該猜到了,這個指令是用來打包測試的,這個指令會將所有的js文件壓縮到app.js中去,但是並不做壓縮處理,用來讓開發者在執行代碼壓縮前調試代碼用的,指令執行後,會在項目的build文件夾下生成一個testing文件夾,裏面即生成的壓縮測試項目

  2.sencha app build package:

  這個指令只對項目進行打包壓縮處理,指令執行後,會將所有的js壓縮合並並進行變量轉換,所有的js文件的代碼會被壓縮成一行放置在app.js中,並在build文件夾下生成一個package文件夾,裏面即生成的壓縮項目。

  3.sencha app build production 或者 sencha app build:

  這兩個指令的效果是一樣的,跟package不同,生成的production主要是用來發布webapp的,除去壓縮了js跟css文件外,它還配置了瀏覽器的離線緩存,只要你的項目訪問了一次,以後每次訪問都是讀取的離線緩存中的內容

 

  4.sencha app build native:

  這個指令是用來將項目打包原生安裝程序的,不過打包前需要配置下項目目錄下的packager.json文件,如果配置錯誤或沒有配置該文件,將不會生成安裝程序,且不會報錯,對於打包安裝程序,一般就是sencha cmd方式的打包跟使用phonegap進行打包,後面我們會詳細講解,這裏就不做多餘的講解了

 

 

以上就是打包的4種方式,這裏給大家簡單介紹下,希望大家知道自己的項目爲什麼會加載緩慢,後面我們還會有更加詳細的教程

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章