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

最新推荐文章于 2023-11-15 15:00:20 发布

原创最新推荐文章于 2023-11-15 15:00:20 发布 · 750 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

vue 专栏收录该内容

35 篇文章

订阅专栏

文章讨论了在Vue应用中，通过使用`require.context`对多个组件进行模块化管理，以提高代码效率和可维护性。原始的导入方式逐个引入，优化后的代码通过动态加载并缓存所有`.vue`文件，简化了导入过程。

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

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,
}