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

最新推荐文章于 2024-06-14 17:48:25 发布

if时光重来

最新推荐文章于 2024-06-14 17:48:25 发布

阅读量541

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/admin_web/article/details/132621559

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

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