關于分包優化的說明
-
在對應平臺的配置下添加"optimization":{"subPackages":true}開啟分包優化
-
目前只支持mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-kuaishou的分包優化
-
分包優化具體邏輯：
-
靜態文件：分包下支持 static 等靜態資源拷貝，即分包目錄內放置的靜態資源不會被打包到主包中，也不可在主包中使用
-
js文件：當某個 js 僅被一個分包引用時，該 js 會被打包到該分包內，否則仍打到主包（即被主包引用，或被超過 1 個分包引用）
-
自定義組件：若某個自定義組件僅被一個分包引用時，且未放入到分包內，編譯時會輸出提示信息
分包內靜態文件示例(官方示例）
"subPackages": [{"root": "pages/sub","pages": [{"path": "index/index"}]
}]
以上面的分包為例，放在每個分包root對應目錄下的靜態文件會被打包到此分包內。
微信小程序官方文檔介紹
mp-weixin
| 屬性 | 類型 | 說明 |
|---|
| appid | String | 微信小程序的AppID，登錄 https://mp.weixin.qq.com |
| 申請 |
| projectname | String | 項目名稱 |
| setting | Object | 微信小程序項目設置，參考setting |
| functionalPages | Boolean | 微信小程序是否啟用插件功能頁，默認關閉 |
| requiredBackgroundModes | Array | 微信小程序需要在后臺使用的能力,詳見 |
|
| resizable | Boolean | 在iPad上小程序是否支持屏幕旋轉，默認關閉 |
| navigateToMiniProgramAppIdList | Array | 需要跳轉的小程序列表，詳見 |
| permission | Object | 微信小程序接口權限相關設置，比如申請位置權限必須填此處詳見 |
| workers | String | Worker 代碼放置的目錄。 詳見 |
|
| optimization | Object | 對微信小程序的優化配置 |
| cloudfunctionRoot | String | 配置云開發目錄，參考setting |
| uniStatistics | Object | 微信小程序是否開啟 uni 統計，配置方法同全局配置 |
| scopedSlotsCompiler | String | Vue2 作用域插槽編譯模式，uni-app 3.1.19+ 開始支持，可選：legacy、auto、augmented，默認：auto |
| mergeVirtualHostAttributes | Boolean | 合并由 Vue 組件編譯而成的小程序組件虛擬節點外層屬性，目前僅支持 id（v4.42+）、style（v3.5.1+）、class（v3.5.1+）以及 v-show 指令生成的 hidden（v4.41+） 屬性 |
| slotMultipleInstance | Boolean | 模擬單個作用域插槽渲染為多個實例，此配置僅限 Vue2 環境 3.7.12+，Vue3 環境已默認支持 |
| embeddedAppIdList | Array | 要半屏跳轉的小程序appid。詳見 |
| requiredPrivateInfos | Array | 地理位置相關接口。詳見 |
| lazyCodeLoading | String | 目前僅支持值 requiredComponents，代表開啟小程序按需注入 |
特性，詳見
| nativeTags | Array | 微信小程序平臺的原生組件 (4.81+) |
setting
編譯到微信小程序平臺下的項目設置。
| 屬性 | 類型 | 說明 |
|---|
| urlCheck | Boolean | 是否檢查安全域名和 TLS 版本 |
| es6 | Boolean | ES6 轉 ES5 |
| postcss | Boolean | 上傳代碼時樣式是否自動補全 |
| minified | Boolean | 上傳代碼時是否自動壓縮 |
| bigPackageSizeSupport | Boolean | 預覽及真機調試時包體積上限是否調整為4M，默認為true（HBuilderX 3.5.5+）。 |
注意: 使用微信小程序手勢組件會強制開啟 ES6 轉 ES5
optimization
對微信小程序的優化配置
| 屬性 | 類型 | 說明 |
|---|
| subPackages | Boolean | 是否開啟分包優化 |
cloudfunctionRoot
如果需要使用微信小程序的云開發，需要在 mp-weixin 配置云開發目錄
"mp-weixin":{// ..."cloudfunctionRoot": "cloudfunctions/", // 配置云開發目錄// ...
}
配置目錄之后，需要在項目根目錄新建 vue.config.js 配置對應的文件編譯規則
{plugins: [new CopyWebpackPlugin([{from: path.join(__dirname, '../cloudfunctions'),to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'cloudfunctions'),},]),],
}
以下是自己項目所實現的三種分包方式介紹
第一種分包發方式：
分包步驟
第一步 打開 manifest.json文件，找到 "mp-weixin",添加 "optimization": {"subPackages":true} 該代碼表示程序分包，完整代碼如下
?{"name": "lcdsfront","appid": "__UNI__EDF7C47","description": "","versionName": "1.0.0","versionCode": "100","transformPx": false,/* 5+App特有相關 */"app-plus": {"usingComponents": true,"nvueStyleCompiler": "uni-app","compilerVersion": 3,"splashscreen": {"alwaysShowBeforeRender": true,"waiting": true,"autoclose": true,"delay": 0},/* 模塊配置 */"modules": {},/* 應用發布信息 */"distribute": {/* android打包配置 */"android": {"permissions": ["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]},/* ios打包配置 */"ios": {},/* SDK配置 */"sdkConfigs": {}}},/* 快應用特有相關 */"quickapp": {},/* 小程序特有相關 */"mp-weixin": {"appid": "","setting": {"urlCheck": false},"usingComponents": true,"optimization": {"subPackages": true}},"mp-alipay": {"usingComponents": true},"mp-baidu": {"usingComponents": true},"mp-toutiao": {"usingComponents": true},"uniStatistics": {"enable": false},"vueVersion": "2"// "h5": {// "devServer": {// "port": 8083, // 端口號// "disableHostCheck": true, // 關閉主機檢查// "proxy": {// "/api": { // 代理路徑前綴// // "target": "https://www.longchi.xyz",// "target": "http://uat.banlu.xuexiluxian.cn/",// // "target": "http://localhost: 8866/", // 目標接口域名// "changeOrigin": true, // 是否跨域 允許跨域 // "secure": false // 設置支付https協議代理// }// }// }// }
}[點擊并拖拽以移動]
?
第二步，開啟分包
在pages.json文件中配置分包，具體代碼如下
我們將登錄的內容分包出去
{// 如果您是通過uni_modules形式引入uView，可以忽略此配置"easycom": { // u-$1 表示components下所有u-*都可以，u-$.vue 表示u-*.vue所有文件都可以，即表示全局引入ui組件所有內容"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"},"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/tabs/index","style": {"navigationBarTitleText": "推薦","navigationStyle": "custom"}},{"path": "pages/tabs/list","style": {"navigationBarTitleText": "分類"}},{"path": "pages/tabs/me","style": {"navigationBarTitleText": "我的","navigationStyle": "custom"}}// {// "path": "pages/login/login",// "style": {// "navigationBarTitleText": "微信一鍵登錄"// }// },// {// "path": "pages/login/bindPhone",// "style": {// "navigationBarTitleText": "綁定手機號"// }// }],"subPackages": [{"root": "pages/login", // 根路徑"pages": [{"path": "login"}, {"path": "bindPhone"}]}],"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/tabs/index","iconPath": "/static/icon/recommend.png","selectedIconPath": "/static/icon/recommend-hl.png","text": "推薦"}, {"pagePath": "pages/tabs/list","iconPath": "/static/icon/classify.png","selectedIconPath": "/static/icon/classify-hl.png","text": "分類"}, {"pagePath": "pages/tabs/me","iconPath": "/static/icon/mine.png","selectedIconPath": "/static/icon/mine-hl.png","text": "我的"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}
分包以后將主包內原分包的內容刪除 內容如下
// {
// "path": "pages/login/login",
// "style": {
// "navigationBarTitleText": "微信一鍵登錄"
// }
// },
// {
// "path": "pages/login/bindPhone",
// "style": {
// "navigationBarTitleText": "綁定手機號"
// }
// }
第二種分包發方式：
直接在根目率創建分別 比如：如下圖所示三個分包，pagesA,pagesB,pagesC
一個主包pages
分別內容配置如下
"subPackages": [{"root": "pagesA","pages": [{"path": "login/login","style": {"navigationBarTitleText":"登錄"}},{"path": "login/bindPhone","style": {"navigationBarTitleText":"綁定手機號"}}],"root": "pagesB","pages": [{...}],"root": "pagesC","pages": [{...}]
}]路徑
root/pagesA/**/*.vue
root/pagesB/**/*.vue
root/pagesC/**/*.vue
第三種分包方式
1, 將 login文件夾整體放在根目錄下
將個人中心的頁面里面登錄跳轉路徑改為 pages/tabs/me.vue
登錄頁面的跳轉路徑由
uni.navigateTo({url: "/pages/login/login"
});改為
uni.navigateTo({url: '/login/login'
})完整代碼如下：
<template><view class="me"><view class="me-bg" @click="login"><image src="/static/image/banlu.png" class="me-img"></image><view class="me-nick">眼仔仔</view></view></view>
</template><script>export default {data() {return {// 綁定用戶對象數據// globalUser: {}}},// 實現頁面數據動態顯示onShow() {// var me = this;// // 定義全局用戶對象// var globalUser = me.getGlobalUser("globalUser");// me.globalUser = globalUser;},methods: {// 微信一鍵登錄login() {uni.navigateTo({url: "/login/login"});}// 性別 自定義點擊事件 // modifySex() {// // 跳轉頁面// uni.navigateTo({// url: "/pages/Sex/Sex"// });// },// 生日 自定義點擊事件 // modifyBirthday() {// // 跳轉頁面// uni.navigateTo({// url: "/pages/meBirthday/meBirthday"// });// },// 昵稱 自定義點擊事件 // modifyNickname() {// // 跳轉頁面// uni.navigateTo({// url: "/pages/meNickname/meNickname"// });// }}}
</script><style scoped="scss">.me {width: 750rpx;height: 281rpx;background: #FFFFFF;/* border-radius: 0px 0px 0px 0px; *//* opacity: 0.65; *//* border: 1px solid #707070; */}.me-bg {display: flex;justify-content: flex-start;align-items: center;width: 100%;height: 281rpx;background: url('https://luxian-ai.oss-cn-beijing.aliyuncs.com/luxian-ai/avatar/2024-07-28/1722173053591686.jpg') no-repeat;background-size: 100% 100%;}.me-img {width: 141rpx;height: 141rpx;border-radius: 50%;background-color: #FFFFFF;opacity: 1;}.me-nick {}
</style>
2, 將文件pages.json中分包的內容 "root": "pages/login", 改為 "root": "login",就可以實現分包
{// 如果您是通過uni_modules形式引入uView，可以忽略此配置"easycom": { // u-$1 表示components下所有u-*都可以，u-$.vue 表示u-*.vue所有文件都可以，即表示全局引入ui組件所有內容"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"},"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/tabs/index","style": {"navigationBarTitleText": "推薦","navigationStyle": "custom"}},{"path": "pages/tabs/list","style": {"navigationBarTitleText": "分類"}},{"path": "pages/tabs/me","style": {"navigationBarTitleText": "我的","navigationStyle": "custom"}}],"subPackages": [{"root": "login", // 根路徑"pages": [{"path": "login","style": {"navigationBarTitleText": "登錄"}}, {"path": "bindPhone","style": {"navigationBarTitleText": "綁定手機號"}}]}],"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/tabs/index","iconPath": "/static/icon/recommend.png","selectedIconPath": "/static/icon/recommend-hl.png","text": "推薦"}, {"pagePath": "pages/tabs/list","iconPath": "/static/icon/classify.png","selectedIconPath": "/static/icon/classify-hl.png","text": "分類"}, {"pagePath": "pages/tabs/me","iconPath": "/static/icon/mine.png","selectedIconPath": "/static/icon/mine-hl.png","text": "我的"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}
3, 將文件login.vue中 登錄跳轉路徑
修改登錄跳轉路徑
uni.navigateTo({url: '/pages/login/bindPhone'
})改為
uni.navigateTo({url: '/login/bindPhone'
})完整代碼如下
<template><view><button @click="login">微信登錄</button></view>
</template><script>// import {// params// } from 'jquery'import {loginByWechat,wechatRegister} from '@/utils/api/login.js'export default {data() {return {}},methods: {// 點擊登錄login() {// 解決閉包問題let that = this;uni.getUserProfile({ // 獲取用戶信息 這是一個閉包函數 有兩個success()函數，稱之為閉包函數desc: '登錄后同步數據',success(ures) {// console.log('getUserProfile', ures);uni.login({ //獲取用戶code碼,前端把code碼傳遞給后端才能判斷用戶是否綁定手機號。// 通過這個code來判斷這個用戶在這個小程序有沒有注冊過[之前有沒有登錄過]success(lres) {// 通過這個code來判斷，這個用戶有沒有綁定手機號let params = {code: lres.code}loginByWechat(params).then(res => {// console.log('后端接口返回', res);// 如果返回'60003'表示這個用戶之前沒有注冊過if (res.code == '60003') {// 注冊微信用戶let params = ({unionId: res.data.unionId ? res.data.unionId :res.data.openid,openId: res.data.openid,sessionKey: res.data.sessionKey,signature: ures.signature,rawData: ures.rawData,encryptedData: ures.encryptedData,iv: ures.iv});// 這是一個閉包函數 有兩個success()函數，稱之為閉包函數that.register(params);} else if (res.code == '200') {// 微信注冊過賬戶(之前登錄過)，查看有沒有綁定手機號that.isMobile(res.data);}})}});}});},// 注冊微信用戶register(params) {wechatRegister(params).then(res => {if (res.code == '200') {this.isMobile(res.data);}// console.log(res);})},isMobile(data) {// 用戶信息包含 token// console.log(data);// 存儲 tokenuni.setStorage({key: 'token',data: data.token})// 判斷用戶有沒有綁定手機號if (!data.member.mobile) { // 取反表示沒有綁定手機號// this.isMobile(res.data.member.mobile);uni.showModal({title: '提示信息',confirmText: '去完善',content: '根據國家規定，需要綁定手機號',success(res) {if (res.confirm) {uni.navigateTo({url: '/login/bindPhone'})}// else if (res.cancel) {// console.log('用戶點擊取消');// }}})}}}}
</script><style></style>
以上就是簡單實現分別介紹與實踐
——1 概述)
