前言

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

方法一：線上圖片

小程序體積大是因為static目錄的圖片資源過大的話，我們可以將static的圖片上傳圖片服務器上去，小程序使用鏈接的形式來下載使用圖片。

靜態(tài)圖片使用線上地址，不要放到項目中，除了navBar的icon，因為那個只能使用本地資源，相對來說這個不大。

1、上傳圖片資源到圖片服務器上去

將切好的圖片上傳到圖片服務器上面，

比如 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根目錄下有一個特殊的文件uni.scss，在代碼中無需 import 這個文件即可在scss代碼中使用這里的樣式變量。uni-app的編譯器在webpack配置中特殊處理了這個uni.scss，使得每個scss文件都被注入這個uni.scss，達到全局可用的效果。我們將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的頁面，其他的頁面進行分包處理，保證主包的大小，因為在編譯后那些靜態(tài)js和組件也會放入主包中，分包方式官網(wǎng)有詳細解釋。

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

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

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

具體使用方法請參考：

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

方法三：依賴分離

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

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

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

"optimization" : {
    "subpackages" : true
}

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

方法四：代碼壓縮

1、在HBuilder上面點擊運行——>運行到小程序模擬器——>運行時是否壓縮代碼

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

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

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

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

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

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

總結

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

最新評論