webpack-uni-component-placeholder

1.0.2 • Public • Published

webpack-uni-component-placeholder

npm npm npm npm

🛟 问题

目前 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,感谢您!!🧑‍💻

Package Sidebar

Install

npm i webpack-uni-component-placeholder

Weekly Downloads

2

Version

1.0.2

License

ISC

Unpacked Size

10 kB

Total Files

3

Last publish

Collaborators

  • yuzi-me