小程序分包优化经验总结uniapp分包这块的文档不太明确,github、网上博客、官网下载的示例也大多只是进行简单分包(组件,图片,js没有独立到分包)导致减少的主包体积有限。查阅相关资料,自己摸索出一套不错的uniapp小程序分包方式。
目录结构
新建项目
新建项目 minutePart
分包配置
调整目录,准备资源文件
分包配置
配置pages.json
{
//分包代码start
"subPackages": [
{
"root": "pages/packA",
"pages": [
{
"path" : "pages/shopCar/shopCar",
"style" : {}
}
]
}
]
}
新建页面,并引入
新建/pages/packA/pages/shopCar/shopCar.vue
template>
<view>
<image src="../../static/1.png" mode=""></image>
qweqwe
<www></www>
</view>
</template>
<script>
import www from '../../components/www/www.vue'
export default {
components:{
www
}
}
</script>
查看效果
调整首页/pages/index/index.vue
<template>
<view class="content">
<navigator url="/pages/packA/pages/shopCar/shopCar">
跳到分包页看效果
</navigator>
</view>
</template>
uniapp智能js分包目录调整,准备资源文件
分包优化配置
uniapp智能地将只有一个分包引用,用的js打包到分包里。两个以上分包引用或一个主包引用都打包到主包。
配置manifest.json
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
/* uniapp智能js分包 */
"optimization":{"subPackages":true},
"usingComponents" : true
},
分包中页面引入
import loading from '@/common/loading.js'