uniapp中使用组件分包

小程序体积限制2M,所以组件跟其他的资源能往分包放置就往分包放置

1.首先配置小程序的分包开启,在manifest.json文件夹下的appid底下写入

mp-weixin:{
appid: 'xxx',//开启分包代码
optimization: {subPackages: true,}
}

2.在pages.json中配置分包页面

{//未分包页面"pages": [{"path": "pages/index","style": {"navigationBarTitleText": "首页",usingComponents: { //主包中使用组件"a-com": "/src/sub-common/components/a-com.vue",},componentPlaceholder: {"a-com": "view",//用view标签占位},}}],// 分包页面"subPackages": [{"root": "sub-common", //文件夹名称"pages": [ {"path": "index","style": {"navigationBarTitleText": "占位分包页", // 建一个vue文件就可以,主要用到components}}]},{"root": "sub-apage","pages": [{path: "index",style: {navigationBarTitleText: "分享页",navigationStyle: "custom",usingComponents: { //分包中使用组件"a-com": "/src/sub-common/components/a-com.vue",},componentPlaceholder: {"a-com": "view",},},},]}]
}

3.在需要使用的页面引入组件,在pages/index.vue 与 sub-apage/index.vue中需要这样引入

<script>
import aCom from "@/sub-common/components/a-com.vue";
</script><template>
<aCom/>
</template>