vue组件动态全局注册，代码少写一点是一点

1、基本概念

在日常开发中，如果我们想使用一个基础组件我们得在js文件中通过import手动导入一个组件，而今天所说的vue组件动态全局注册则不需要，它能让我们在html中直接书写相关组件，而不用显示引入相关组件。

2、组件动态全局注册前后对比

项目结构

a、未使用动态全局注册写法及效果

b、使用了动态全局注册及效果

由上可看出，如果我们页面多的时候是能够让我们少些很多组件导入代码，直接在html中书写即可，在一定程度上面可以提升我们的开发效率

c、核心代码

const requireComponent = require.context(
	'./components',//想要全局注册的组件父文件夹
	true, //遍历文件夹（如果你的组件是被一个个文件夹包裹的话）
	/\w+\.vue$/     //匹配vue后缀的文件
)
requireComponent.keys().forEach((fileName) => {
	const componentConfig = requireComponent(fileName);//获取组件
	Vue.component(componentConfig.default.name, componentConfig.default || componentConfig) //全局注册组件（componentConfig.default.name：组件的名称，componentConfig.default：组件本身）
})
复制代码

3、思考：这样写虽然可以提升开发体验和效率，但有什么弊端呢？(且看下面一个例子)

我们在App.vue中只使用component1组件，看下我们的代码打包效果

由上可看出使用了动态全局注册的组件，即使页面没有使用到，也会被打包进生产代码中，产生了代码冗余。所以对于该功能我们尽量只使用于我们的基础组件，对于我们的业务组件不要使用。然后需要全局注册组件的所属文件夹中包含的组件尽可能的都是我们使用到的组件，否则就属于冗余组件了。

待解决：上面的问题能通过否使用类似于webpack提供的tree-shaking功能去除冗余组件来解决呢，有知道方法的可以赐教下，不胜感激！

转载于:https://juejin.im/post/5cc5b48051882525147fc04a