webpack-uni-component-placeholder

🛟 问题

目前 uniapp 未能对分包异步化做出更好的解决方案，虽说可以在 pages.json 中配置，但未能得到更明显，更灵活的效果。😇 随着项目业务增加，主包必定会有过大的情况，所以需要对项目进行分包处理。当编写的组件不能灵活调用到分包中的话，就会面临着组件也会 build 到主包中，超出各个厂家规定。🚫

📖 简介

此插件能够解决 uniapp 分包后，异步化调用组件，能够运用到主包、分包中随便怎么调用。同样，我们可以把组件单独作为一个分包，这样就可以灵活调用。

🖥 平台支持

目前平台支持 componentPlaceholder 的有：微信小程序 ，抖音小程序 望补充issues

🏕 示例

webpack 版

webpack-uni-component-placeholder-demo

vite 版

vite-uni-component-placeholder-demo

🛠 安装

webpack 版

npm install webpack-uni-component-placeholder

或

yarn add webpack-uni-component-placeholder

vite 版

npm install vite-uni-component-placeholder

或

yarn add vite-uni-component-placeholder

⚙️ 配置

找到 vue.config.js 配置插件，如果没有，就在根目录下创建 vue.config.js，复制以下代码

// vue.config.js
const WebpackUniComponentPlaceholder = require('webpack-uni-component-placeholder');

module.exports = {
  configureWebpack: {
    plugins: [
      new WebpackUniComponentPlaceholder()
    ]
  }
}

✏️ 使用

🥇 No.1

在 vue 中 script 引用组件，例如：/pages/index/index.vue 中

<template>
  <view class="container">
    <subtitle>主包调用分包组件</subtitle>
    <card></card>
  </view>
</template>

<script>
// 组件引用
import subtitle from '@/components/subTitle/index'
import card from '@/operate/components/card'

export default {
  // 注册组件
  components: {
    subtitle,
    card
  },
  // 关键一步在这里，异步化组件
  componentPlaceholder: {
    subtitle: 'view',
    card: 'view'
  },
  data() {
    return {}
  },
  onLoad() { },
  methods: { },
};
</script>

📌 描述：

如果组件是在当前分包中，可以正常引用。但，如果组件是在其他分包中，引用的话，就会报错。小程序就提供了分包组件异步化，可以直接引用其他分包中的组件。

上面代码是，最关键的一步是，在需要异步化页面中写了 componentPlacholder，将会把这里写的直接生成到小程序 json 中。

subtitle： 组件是在组件分包中，我在这里将所有基础 UI 组件分成了一个包，一样的也要在 componentPlaceholder 中异步化 card：组件是另外一个分包中的业务组件，也需要 componentPlaceholder 异步化

🥈 No.2

<template>
  <view class="container">
    <subtitle>主包调用分包组件</subtitle>
    <card></card>
  </view>
</template>

<script>
// 组件引用
import subtitle from '@/components/subTitle/index'
import card from '@/operate/components/card'

// 关键一步在这里，异步化组件
const componentPlaceholder = {
  subtitle: 'view',
  card: 'view'
}

export default {
  // 注册组件
  components: {
    subtitle,
    card
  },
  data() {
    return {}
  },
  onLoad() { },
  methods: { },
};
</script>

📌 描述：

也可以直接写在 script 中，不必写在导出模块中，可以见以上示例。

🥈 No.3

自动扫描组件，在 pages.json 中加入

"easycom": {
  "autoscan": true,
  "custom": {
    "subtitle": "@/components/subTitle/index"
  }
}

然后在页面中异步化注册

<template>
  <view class="container">
    <subtitle>调用内部组件</subtitle>
    <card @click="handleBtn" />
  </view>
</template>

<script>
import card from '@/operate/components/card'
export default {
  components: {
    card
  },
  // 关键一步在这里，异步化组件
  componentPlaceholder: {
    subtitle: 'view'
  },
  data() {
    return { }
  },
  methods: { },
};
</script>

📌 描述：

上面在页面中，并没有将 subtitle 组件引用，也没有注册，而是通过 easycom 方式引入。然后我们异步化组件，一样的可以实现效果。

🙋🏻‍♂️ 温馨提示

如果您喜欢骆驼峰命名规则，需要注意的是，uniapp 生成 json 文件后，会生成带杆(-)的命名 例如：

"subTitle": "@/components/subTitle/index"

将会生成以下格式

"usingComponents": {
  "sub-title": "../../components/subTitle/index"
}

那么，您在 componentPlaceholder 中需要这样写

componentPlaceholder: {
  'sub-title': 'view'
}

🤜🏻 感谢

如果您有更好的方法或者遇到问题，一起研究讨论。请到移步到issues，感谢您！！🧑‍💻