哈嘍，大家好呀！小韻攜原創(chuàng)博文給大家請(qǐng)安啦！

前言：開(kāi)發(fā)微信小程序時(shí)，若項(xiàng)目比較大，必定要分包，當(dāng)項(xiàng)目過(guò)于大時(shí)，則需要細(xì)致、謹(jǐn)慎地對(duì)項(xiàng)目進(jìn)行分包優(yōu)化和精簡(jiǎn)，這是一個(gè)不可避免地問(wèn)題，網(wǎng)上的大多數(shù)分包優(yōu)化都是針對(duì)于小項(xiàng)目的普通官方分包優(yōu)化，并未將分包優(yōu)化講解更深一步。

介紹：博文介紹了對(duì)于較大的項(xiàng)目而言，根據(jù)微信開(kāi)發(fā)者工具中提示，從自用組件、官方組件、項(xiàng)目配置等方面提出分包、精簡(jiǎn)項(xiàng)目的見(jiàn)解。

目錄

一.文件結(jié)構(gòu)和工具功能

1.小程序編譯的文件結(jié)構(gòu)

2.工具功能使用

A.發(fā)行

B.代碼依賴分析

二.控制方法

1.自用組件/工具

2.官方組件

A.uni_modules

B.vant

3.全局配置

三.總結(jié)

一.文件結(jié)構(gòu)和工具功能

1.小程序編譯的文件結(jié)構(gòu)

非常必要推薦了解小程序文件結(jié)構(gòu)，對(duì)于稍大的項(xiàng)目，對(duì)于包的精簡(jiǎn)會(huì)起到柳暗花明又一村的效果 。眾所周知，微信小程序分為“主包”和“分包”模塊，每個(gè)包不得超過(guò)2M最多分10個(gè)包共20M。而微信小程序的文件結(jié)構(gòu)，只有主包和分包：

?因此，我們的代碼中，除了定義的分包外，所有的其它內(nèi)容都在主包中：

這給我們了啟示，在包容量過(guò)大情況下，盡量將組件分在各分包內(nèi)，同時(shí)檢查除分包外的全局配置。

2.工具功能使用

A.發(fā)行

使用HbuilderX運(yùn)轉(zhuǎn)到微信開(kāi)發(fā)者工具編譯成其語(yǔ)言，可經(jīng)過(guò)“運(yùn)行”和“發(fā)行”兩種。但“發(fā)行”對(duì)編譯包更加精簡(jiǎn)，若要“上傳”小程序，一定要點(diǎn)“發(fā)行”功能。

B.代碼依賴分析

代碼依賴分析中，詳細(xì)展示了每個(gè)包及文件的大小，可以清晰找出比較大的文件夾和文件，進(jìn)而優(yōu)化。

其中還有一個(gè)“無(wú)依賴代碼文件數(shù)”功能，在“全部”下面，這個(gè)功能比較雞肋，不能夠完全準(zhǔn)確地分析出依賴與否，羅列的文件是有可能存在依賴的，只是沒(méi)有檢測(cè)出來(lái)，不過(guò)還是能在一定程度上幫助我們分析出可能無(wú)用的文件，自己進(jìn)行嘗試篩選即可（我也要吐槽下，如果這個(gè)功能按照文件夾分類不更好嗎？）

二.控制方法

1.自用組件/工具

我們會(huì)在編寫中制作全局自用組件和分包自用組件。

對(duì)于一般的項(xiàng)目來(lái)說(shuō)，比較通用的自用組件，放在全局components下即可，不會(huì)給主包占用太多的空間。

對(duì)于迫切精簡(jiǎn)的項(xiàng)目，則考慮把通用組件分別分配在每個(gè)調(diào)用的分包中以減輕主包壓力。基于這種思想，我們可以預(yù)估項(xiàng)目的整體大小、考慮組件的全局通用頻率進(jìn)行折衷考慮。

除了組件外，不管哪里的圖片，都要放在圖片服務(wù)器上，僅保留常用的，譬如tabbar圖標(biāo)等幾kb的圖片。

2.官方組件

我說(shuō)的官方組件，特指uni_modules和vant組件。這兩款都是非常優(yōu)秀和完整的組件包，里面包含各種組件（包含一些根本不需要的組件）。而它們的內(nèi)部調(diào)用和引入方式卻不太相同，因此也造就了不同的分包和精簡(jiǎn)方法。

A.uni_modules

對(duì)于uni_modules組件，內(nèi)部依賴性很低，樣式尚可，正如官網(wǎng)所說(shuō)，其獨(dú)立性強(qiáng)，無(wú)需配置就可使用。

對(duì)于一般的項(xiàng)目，會(huì)把整個(gè)uni_modules放在外面，在頁(yè)面中直接使用即可。

對(duì)于迫切精簡(jiǎn)的項(xiàng)目，可以考慮，將外部的uni_modules除“uni-icons”，“uni-scss”保留外，全部刪除，然后在各分包內(nèi)直接引入所需組件，在頁(yè)面使用時(shí)需要單獨(dú)import引入注冊(cè)為component?！皍ni-icons”和"uni-scss"保證了各組件的圖標(biāo)和樣式不出問(wèn)題，已是最大程度地保留了uni_modules組件功能性，當(dāng)然譬如"uni-transition"的缺失，會(huì)造成某些組件的“來(lái)去”不再平滑。

// uni_modules組件可像普通自定義組件般，放到分包內(nèi)，vue文件中注冊(cè)組件使用。
import uniDataPicker from '@/pagesE/components/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'
 components: { uniDataPicker }

B.vant

對(duì)于vant組件，在小程序中叫vant-weapp，內(nèi)部依賴性高，除此之外，還不太兼容、偶出問(wèn)題（諸如雙向綁定不會(huì)自動(dòng)綁定問(wèn)題最多）。

對(duì)于一般的項(xiàng)目來(lái)說(shuō)，將整個(gè)vant組件包放在外面，引入方式建議為按需引入，在pages.json中，在使用組件的style-usingComponents中引入，當(dāng)然如果自己的小程序容量較小并且性能較好，可以放在globalStyle-usingComponents。

值得注意的是，vant組件內(nèi)部依賴性高，不能像uni_modules般分在各個(gè)包中單獨(dú)引用，只能放在工程外部，才能被import找到，即放在分包中，無(wú)論以何種方式引入，是不會(huì)被找到的。

  // 分包加載vant組件
   {
		"path": "pages/index",
		"style": {
		    "navigationBarTitleText": "首頁(yè)",
			"usingComponents": {
				"van-field": "/wxcomponents/vant/dist/field/index",
				"van-popup": "/wxcomponents/vant/dist/popup/index",
				"van-button": "/wxcomponents/vant/dist/button/index"
			}
		}
	}             
    // 全局加載vant組件(不推薦)
    "globalStyle": {
		 "navigationBarTextStyle": "black",		
		 "navigationBarBackgroundColor": "#FFFFFF"
		 "usingComponents": {
		     "van-button": "/wxcomponents/vant/dist/button/index",
		 	 "van-cell": "/wxcomponents/vant/dist/cell/index",
		 	 "van-cell-group": "/wxcomponents/vant/dist/cell-group/index",
		  }
	 }

對(duì)于迫切精簡(jiǎn)的項(xiàng)目，目前博主在遷移vant組件上失敗，即上面所說(shuō)的分包引入的方法，因此只能采用刪去不需要的組件來(lái)精簡(jiǎn)項(xiàng)目，對(duì)于常用的組件進(jìn)行保留，可以參考“無(wú)依賴代碼文件”進(jìn)行刪除，但根據(jù)經(jīng)驗(yàn)，“good-action”系列,“minxins”,"overlay"會(huì)有某些常用組件內(nèi)部調(diào)用的，不可以刪除。以下是我精簡(jiǎn)后的vant組件，凡事重在嘗試，當(dāng)然自己根據(jù)所需精簡(jiǎn)即可。

???????官方組件的完整包的大小約在300kb左右，對(duì)本就不太富裕空間其實(shí)就是一種累贅了。uni_modules和vant的功能范圍都大差不差，uni_modules更符合微信官方的風(fēng)格，大部分情況下，都可以在其中找到我們所需要的，找不到的可以去插件市場(chǎng)，我在微信小程序運(yùn)行、編譯、發(fā)布等開(kāi)發(fā)概括_韻澤月光的博客-CSDN博客中也泛講了相關(guān)開(kāi)發(fā)準(zhǔn)備。vant組件在小程序上可就不如前者和PC端了（小程序vant是用微信語(yǔ)言寫的），會(huì)和PC端的使用有些不一樣、不生效的，但是其中的某些組件確實(shí)可以彌補(bǔ)uni_modules中的不符合html和js的交互功能的不足。所以其中取舍，我也差不多和大家分享了經(jīng)驗(yàn)了。

3.全局配置

全局配置是很容易忽略的，為追求方便，項(xiàng)目開(kāi)發(fā)者會(huì)直接在main.js或者App.vue中引入全局js文件或者css文件。

@font-face

有些項(xiàng)目在初次建立時(shí)，就引入的全局的css文件，比如uni.scss，或者自定義的字體css文件。而字體引入都是通過(guò)base64編碼引入，編碼本身就已經(jīng)很大了，或已經(jīng)超過(guò)正常需求的代碼大小了，而且在每個(gè)編譯后的wxss中都存在，代碼大小直接翻倍是沒(méi)有問(wèn)題了，我已經(jīng)吃過(guò)兩次虧了。

這可能需要自己主動(dòng)去微信開(kāi)發(fā)者工具觀察每個(gè)文件的大小了，若出現(xiàn)了批量的異常大小的相同后綴文件，那大概就是被全局配置了，進(jìn)入文件內(nèi)容可自行查看和解決。

三.總結(jié)

博文主要講解了對(duì)于實(shí)際大包且可能出現(xiàn)超包的項(xiàng)目的精簡(jiǎn)項(xiàng)目方法，提供了分包、精簡(jiǎn)項(xiàng)目的出發(fā)角度和考慮方向，即根據(jù)微信開(kāi)發(fā)者工具中提示，從自用組件、官方組件、項(xiàng)目配置等方面提出了見(jiàn)解。我在所參與的兩個(gè)項(xiàng)目中，都出現(xiàn)了爆炸容量?。?！，最后分去主包0.02Mb的內(nèi)容都花費(fèi)不小時(shí)間，由于分包經(jīng)驗(yàn)少，所以可能會(huì)出現(xiàn)絕對(duì)的錯(cuò)誤和相對(duì)的經(jīng)驗(yàn)錯(cuò)誤，請(qǐng)大家在評(píng)論區(qū)指正。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-721104.html

到了這里，關(guān)于微信小程序中主包和分包過(guò)大，詳解分包問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！