自己的封装了一个组件库,如何实现按需引入?

Question

我的组件如下 MyInput.vue MySelect.vue MyRadio.vue

目录结构如下

--MyInput
    --index.vue
--MySelect
    --index.vue
--MyRadio
    --index.vue
index.js

• index.js

  import MyInput from './MyInput/index.vue'
  import MySelect from './MySelect/index.vue'
  import MyRadio from './MyRadio/index.vue'
  const components = [MyInput, MySelect, MyRadio]
  const install = function (Vue, customRequest) {
  components.forEach((cpt) => {
    Vue.component(cpt.name, cpt)
  })
  }
  export default install

我依赖于 install 实现了所有的组件的挂载

现在想实现 按需引入,我自己想了一个比较笨的方式

export const _MyInput = MyInput
export const _MySelect = MySelect
export const _MyRadio = MyRadio

请问各位大佬 是否有更加优雅的方式?

Answer 1

按需引入关键在于你打包的时候，有没有把所有组件单独打包，你没有发全你的配置文件，我估计按你的方式还是会把所有文件打包在一个JS文件中，这样的话就算你单独引入 MyInput 没有用到别的两个组件，但是加载JS的时候还是会吧所有组件全部引入，具体操作你看以看看以下文章
https://juejin.cn/post/694647...