1. 程式人生 > >微信小程式程式碼最大限制2M的解決方案

微信小程式程式碼最大限制2M的解決方案

瞭解小程式有最大程式碼量限制之前需要先了解微信小程式的本質:前端近幾年都處於技術爆炸時期,
react
最早的是facebook開源的開發框架----react,支援移動網頁和原生app的開發(react native),提倡一次學習,全渠道開發。目的是讓產品研發更聚焦更敏捷,它有三個重要特性:

資料繫結:資料驅動互動
模組化:可複用的輪子
多終端渲染:適配多客戶端,用前端技術就能實現原生app
React 專注於使用 Javascript ES6
React使用JSX,JSX 意味著 React 中的所有內容都是 Javascript -- 用於JSX模板和邏輯。
React 和 Vue 是很靈活的,他們的庫可以和各種包搭配
React 經常與 Redux 在一起使用。Redux 以三個基本原則來自述:
	單一資料來源(Single source of truth)
	State 是隻讀的(State is read-only)
	使用純函式執行修改(Changes are made with pure functions)
換句話說:整個應用程式的狀態儲存在單個 store 的狀態樹中。這有助於除錯應用程式,一些功能更容易實現。狀態是隻讀的,只能通過 action 來改變,以避免競爭條件(這也有助於除錯)。編寫 Reducer 來指定如何通過 action 來轉換 state。
React是前端元件化框架,React 只有 V —— 你需要自己解決 M 和 C。(模型 - 檢視 - 控制器模式(MVC)將專案分為三個部分:模型,檢視和控制器。)
React本身就是元件化的。

vue
vue是開發者創造的js框架,它也是一個能高效開發原生app的開發框架,與react的區別不大:

都支援資料繫結
都指出模組化
多終端渲染
Vue 使用 Javascript ES5 或 ES6
Vue通過單檔案元件,擴充套件方法的方式實現元件化
Vue 可以使用 Redux,但它提供了 Vuex 作為自己的解決方案。Vue 支援單向繫結和雙向繫結(預設為單向繫結)。
Vue是一個mvvm的框架
Vue使用模板

除了誕生react,Vue等javascript框架,還產生了webpack自動化打包釋出,nodejs後端框架,大家都本著讓開發效率再高一點,再優雅一點的思路,逐漸走到當下,全部這些創新,徹底釋放出移動端端生產力。

小程式的特性
weapp 就是微信小程式,從開發的角度看,它和React 和 Vue差不多,很容易上手,敏捷開發,但是從更系統的角度看,小城的獨立特性就很明顯:

跨平臺:跨越安卓和IOS平臺,降低開發成本
更完善:有自己獨立並保持快速迭代的開發工具,寫程式碼,除錯,釋出
更封閉:
更小:程式碼打包後,要求不能大於2M
輕應用:小而美,用完就走,無需下載註冊,不佔記憶體

官網上關於微信小程式的建議:
在這裡插入圖片描述

最近公司開發的小程式控制了程式碼量之後還是超過了2M,解決辦法是:使用分包載入。
大部分小程式都會有幾個功能組成,通常獨立,但是會有公共的邏輯,並且這些功能通常會對應幾個獨立的頁面,那麼小程式程式碼的打包,大可不必打成一個,可以按照功能的劃分,拆分成幾個分包,當需要用到某個功能時,才載入這個功能對應的分包。

對於使用者來說,小程式的載入流程變成了:
1,首次啟動,載入小程式主包,顯示主包內的頁面
2,如果使用者進入了某個分包的頁面,再載入這個對應分包,顯示分包的頁面

採用分包載入,對於開發者而言,能使小程式有更大的程式碼體積,承載更多的功能和服務,對於使用者而言,可以更快的開啟小程式,同時再不影響啟動速度的前提下使用更多功能。

分包的劃分

在配置前首先需要開發者規劃下各個分包需要容納的內容,建議開發者按照功能劃分的原則,將同一個功能下的頁面和邏輯放置於同一個目錄下,對於一些跨功能之間的公共邏輯,將其放置於主包下,這樣可以確保在分包引用這部分功能時,這部分的邏輯一定存在。

在分包劃分時,應該注意以下事項:

1,避免分包與分包之間引用上的耦合。因為分包的載入是使用者操作觸發的,並不能確保其分包載入時,
另一個分包就一定存在,這個時候可能導致js邏輯異常,某些資源找不到的錯誤;
2,一些公共用到的自定義元件,需要放在主包內;
3,使用小程式自帶的tab切換時,list中的頁面需要放在主包內。

分包的配置

開發者通過在app.json subPackages 欄位宣告專案分包結構:

{
	'pages': [
 		 'pages/welcome',
 		 'pages/movie',
  		 'pages/tvPlay'
  		 // 'pages/detail'
	],
	'subPackages': [
  	{
    	 'root': 'packageA',
   		 'pages': [
      		'pages/detail'
    	]
 	 }
	]
}

分包載入的低版本相容問題
微信6.6.0版本開始支援分包載入,而對於低版本的客戶端,編譯後臺會將所有的分包打包成一個整包,老版本的客戶端依然按照整包的方式進行載入。所以還是建議開發者儘量控制程式碼包的大小。

目前小程式分包大小的限制
整個小程式所有分包大小不超過4M
單個分包/主包大小不能超過2M

參考網址:
https://blog.csdn.net/acmdown/article/details/80037660
官方網址:
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html?search-key=subPackages
膜拜大佬~~