vue2项目优化一个页面引入多个组件

场景：在一个页面引入多个组件，原始写法：

import view1 from "../../components/ceshi_view/view1.vue";
import view2 from "../../components/ceshi_view/view2.vue";
import view3 from "../../components/ceshi_view/view3.vue";
import view4 from "../../components/ceshi_view/view4.vue";
export default {
	components: {view1, view2, view3, view4}
}

优化后代码：

const files = require.context('../../components/ceshi_view', true, /.vue/)
const modules = {}
files.keys().forEach(key => {
  const name = key.replace(/(\.\/|\.vue)/g, '')
  modules[name] = files(key).default || files(key)
})
export default {
components: modules,
}