COMMPANY 公司動(dòng)態(tài)
我們的作品，他們的故事
Our work, their stories
Our work, their stories
如何為你的微信小程序體積瘦身
發(fā)布人:龍兵科技
17-05-11
眾所周知，微信小程序在發(fā)布的時(shí)候，對(duì)提交的代碼有 2 MB 大小的限制。所以，如果你正在寫一個(gè)功能稍微復(fù)雜一點(diǎn)的小程序，就必須得時(shí)刻小心注意你的代碼是不是快觸及這個(gè)底線了。
在設(shè)計(jì)一個(gè)小程序之初，我們就需要重點(diǎn)考慮這一點(diǎn)。例如，我們可以采取一些方法，避免過早遭遇這個(gè)問題。
避免使用本地大圖片、大資源文件
請(qǐng)避免在小程序的 UI 上使用大圖片，應(yīng)該盡可能的通過顏色樣式，來裝點(diǎn)你的小程序。
或者，使用小而精致的小圖標(biāo)來點(diǎn)綴
如果實(shí)在想用大圖片，那也不要將圖片放進(jìn)小程序的本地代碼中。應(yīng)該采用從一個(gè)遠(yuǎn)程 URL 地址加載圖片的方式。
這些舉措，就可以避免把大圖片、大資源文件等打包進(jìn)小程序的發(fā)布包中去了。
不要讓你的代碼太啰嗦
在 JavaScript 代碼層面，請(qǐng)審慎的考慮你的代碼邏輯。不要把一個(gè)很簡單的邏輯洋洋灑灑的寫了一大堆，請(qǐng)優(yōu)化和精簡你的代碼。
在視圖層面，盡量避免不必要的組件嵌套，能用一個(gè) view 做到的，就不要再多套一層 view。這對(duì)減少代碼尺寸和代碼性能都是有好處的。
使用工具壓縮優(yōu)化代碼
在當(dāng)今 HTML5 等 Web 前端項(xiàng)目的開發(fā)和發(fā)布中，我們通常會(huì)通過使用一些前端工程化工具來處理我們的代碼，比如使用 Gulp，結(jié)合一些功能插件，如：Uglify、CSS Nano、HTML min 等。使用這些工具，可以讓我們的代碼尺寸小上那么一大截（大約 20%~30%）。
而幸運(yùn)的是，這些工具對(duì)小程序開發(fā)來說，也完全管用！通過簡單的使用這些工具，就能讓我們的代碼減小那么多，何樂而不為呢。
在小程序中，我們大致有這么幾類可以使用工具進(jìn)行優(yōu)化的文件：
JSON 文件：我們可以使用 JSON minify 來壓縮 JSON 文件，去除 JSON 文件中多余的空格
JavaScript 文件：使用uglify，對(duì) JS 代碼進(jìn)行語法優(yōu)化和文本壓縮
WXML 文件：使用htmlmin，可以對(duì) WXML 文件中多余的空格，注釋等進(jìn)行清理
WXSS 文件：可以使用 LESS 提供的特性，對(duì)小程序中的全局 WXSS 進(jìn)行合并；使用 CSS Nano 對(duì) WXSS 文件進(jìn)行清理和壓縮；使用 AutoPrefixer 對(duì) WXSS 添加不同環(huán)境下的前綴，達(dá)到良好的兼容性。
圖片文件：通過使用 Imagemin，可以用來優(yōu)化圖片文件的大小。
在設(shè)計(jì)一個(gè)小程序之初，我們就需要重點(diǎn)考慮這一點(diǎn)。例如，我們可以采取一些方法，避免過早遭遇這個(gè)問題。
避免使用本地大圖片、大資源文件
請(qǐng)避免在小程序的 UI 上使用大圖片，應(yīng)該盡可能的通過顏色樣式，來裝點(diǎn)你的小程序。
或者，使用小而精致的小圖標(biāo)來點(diǎn)綴
如果實(shí)在想用大圖片，那也不要將圖片放進(jìn)小程序的本地代碼中。應(yīng)該采用從一個(gè)遠(yuǎn)程 URL 地址加載圖片的方式。
這些舉措，就可以避免把大圖片、大資源文件等打包進(jìn)小程序的發(fā)布包中去了。
不要讓你的代碼太啰嗦
在 JavaScript 代碼層面，請(qǐng)審慎的考慮你的代碼邏輯。不要把一個(gè)很簡單的邏輯洋洋灑灑的寫了一大堆，請(qǐng)優(yōu)化和精簡你的代碼。
在視圖層面，盡量避免不必要的組件嵌套，能用一個(gè) view 做到的，就不要再多套一層 view。這對(duì)減少代碼尺寸和代碼性能都是有好處的。
使用工具壓縮優(yōu)化代碼
在當(dāng)今 HTML5 等 Web 前端項(xiàng)目的開發(fā)和發(fā)布中，我們通常會(huì)通過使用一些前端工程化工具來處理我們的代碼，比如使用 Gulp，結(jié)合一些功能插件，如：Uglify、CSS Nano、HTML min 等。使用這些工具，可以讓我們的代碼尺寸小上那么一大截（大約 20%~30%）。
而幸運(yùn)的是，這些工具對(duì)小程序開發(fā)來說，也完全管用！通過簡單的使用這些工具，就能讓我們的代碼減小那么多，何樂而不為呢。
在小程序中，我們大致有這么幾類可以使用工具進(jìn)行優(yōu)化的文件：
JSON 文件：我們可以使用 JSON minify 來壓縮 JSON 文件，去除 JSON 文件中多余的空格
JavaScript 文件：使用uglify，對(duì) JS 代碼進(jìn)行語法優(yōu)化和文本壓縮
WXML 文件：使用htmlmin，可以對(duì) WXML 文件中多余的空格，注釋等進(jìn)行清理
WXSS 文件：可以使用 LESS 提供的特性，對(duì)小程序中的全局 WXSS 進(jìn)行合并；使用 CSS Nano 對(duì) WXSS 文件進(jìn)行清理和壓縮；使用 AutoPrefixer 對(duì) WXSS 添加不同環(huán)境下的前綴，達(dá)到良好的兼容性。
圖片文件：通過使用 Imagemin，可以用來優(yōu)化圖片文件的大小。
