前言

在uniapp開發(fā)小程序這一塊，相信很多開發(fā)者都遇到過代碼體積太大無法打包的問題，這時(shí)候就要優(yōu)化小程序包大小。下面分享一下我的解決思路。希望能給大家一些幫助吧。

方法一：線上圖片

小程序體積大是因?yàn)閟tatic目錄的圖片資源過大的話，我們可以將static的圖片上傳圖片服務(wù)器上去，小程序使用鏈接的形式來下載使用圖片。

靜態(tài)圖片使用線上地址，不要放到項(xiàng)目中，除了navBar的icon，因?yàn)槟莻€(gè)只能使用本地資源，相對(duì)來說這個(gè)不大。

1、上傳圖片資源到圖片服務(wù)器上去

將切好的圖片上傳到圖片服務(wù)器上面，

比如 https://www.xxxxxxxx.com.cn/wx/static/images/1.png

2、處理JS和vue中的圖片引用

2.1、定義JS全局變量

在main.js頁面定義js全局變量

Vue.prototype.staticDir = 'https://www.xxxxxxxx.com.cn/wx/static/'; 
Vue.prototype.getStaticFilePath = function (url) {
    return Vue.prototype.staticDir + url;  
}

2.2、替換vue中的圖片地址

以前我們引用的圖片地址是下面這樣的：

<view class="demo">
    <image src="/static/images/1.png"></image>
</view>

現(xiàn)在我們修改src成這樣即可：

<view class="demo">
    <image :src="getStaticFilePath('/images/1.png')"></image>
</view>

3、處理css中的圖片引用

uniapp根目錄下有一個(gè)特殊的文件uni.scss，在代碼中無需 import 這個(gè)文件即可在scss代碼中使用這里的樣式變量。uni-app的編譯器在webpack配置中特殊處理了這個(gè)uni.scss，使得每個(gè)scss文件都被注入這個(gè)uni.scss，達(dá)到全局可用的效果。我們將scss的static目錄變量放到這里，即可全局使用了。

3.1、定義scss全局變量

在uni.scss的最后添加：

// 背景圖片路徑
$custom-bg-img-url:'https://www.xxxxxxxx.com.cn/wx/static/';

3.2、css文件改名成scss文件

將原來的css文件改名成scss文件，并像下面這樣修改vue中的引用。加上了lang=“scss”

<style scoped lang="scss">

</style>

3.3、替換css中的圖片地址

以前css中的背景圖地址是下面這樣的：

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url(/static/imags/1.png);
    background-size: cover;
}

現(xiàn)在我們修改url成這樣即可：

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url($custom-bg-img-url+'/images/1.png');
    background-size: cover;
}

方法二：分包加載

除了TabBa的頁面，其他的頁面進(jìn)行分包處理，保證主包的大小，因?yàn)樵诰幾g后那些靜態(tài)js和組件也會(huì)放入主包中，分包方式官網(wǎng)有詳細(xì)解釋。

目前小程序分包大小有以下限制：

整個(gè)小程序所有分包大小不超過 20M
單個(gè)分包/主包大小不能超過 2M

對(duì)小程序進(jìn)行分包，可以優(yōu)化小程序首次啟動(dòng)的下載時(shí)間，以及在多團(tuán)隊(duì)共同開發(fā)時(shí)可以更好的解耦協(xié)作。

具體使用方法請(qǐng)參考：

• 官網(wǎng)介紹
• 使用分包
• 獨(dú)立分包
• 分包預(yù)下載
• 分包異步化

方法三：依賴分離

使用分包之后會(huì)發(fā)現(xiàn)遇到了一個(gè)奇怪的問題，子包的組件和js文件會(huì)被打包到主包的vendor.js文件中，這就導(dǎo)致了vendor.js過大。

1、檢查manifest.json，在這個(gè)文件下的源碼視圖中，在mp-weixin節(jié)點(diǎn)有個(gè)optimization，

optimization下的subpackages節(jié)點(diǎn)時(shí)用來控制微信分包的，需要將此節(jié)點(diǎn)設(shè)為true

"optimization" : {
    "subpackages" : true
}

2、配置好重行運(yùn)行，會(huì)發(fā)現(xiàn)分包的js文件將不會(huì)再打包到主包的vendor.js中了

方法四：代碼壓縮

1、在HBuilder上面點(diǎn)擊運(yùn)行——>運(yùn)行到小程序模擬器——>運(yùn)行時(shí)是否壓縮代碼

2、在HBuilder上面點(diǎn)擊發(fā)行——>小程序——>發(fā)行——>小程序-微信(僅適用于uni-app)(W)

3、輸入小程序名稱和appid點(diǎn)擊發(fā)行即可。然后控制臺(tái)會(huì)開始編譯，等編譯好了會(huì)自動(dòng)打開微信開發(fā)者工具。

• 如果手動(dòng)發(fā)行，則點(diǎn)擊發(fā)行按鈕后，會(huì)在項(xiàng)目的目錄 unpackage/dist/build/mp-weixin 生成微信小程序項(xiàng)目代碼。在微信小程序開發(fā)者工具中，導(dǎo)入生成的微信小程序項(xiàng)目，測(cè)試項(xiàng)目代碼運(yùn)行正常后，點(diǎn)擊“上傳”按鈕，之后按照 “提交審核” => “發(fā)布” 小程序標(biāo)準(zhǔn)流程，逐步操作即可。
• 如果在發(fā)行界面勾選了“自動(dòng)上傳微信平臺(tái)”，則無需再打開微信工具手動(dòng)操作，將直接上傳到微信服務(wù)器提交審核。

4、現(xiàn)在縮小了很多，以前3.2M，現(xiàn)在只有1.8M，現(xiàn)在不管是用來上傳代碼還是調(diào)試都完全沒有問題了。

5、“運(yùn)行” 和 “發(fā)行” 的區(qū)別：

運(yùn)行：模式有 SourceMap 可以方便的進(jìn)行斷點(diǎn)調(diào)試；編譯出的代碼存放于根目錄下的 /dist/dev/目錄。
發(fā)行：模式會(huì)將代碼進(jìn)行壓縮，體積更小更適合發(fā)布為正式版應(yīng)用；編譯出的代碼存放于根目錄下的 /dist/build/ 目錄。

總結(jié)

到此這篇關(guān)于uniapp開發(fā)微信小程序主包太大和vendor.js過大無法打包問題解決的文章就介紹到這了,更多相關(guān)uniapp小程序主包太大無法打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論