Vue2.0,关于前端开发中一个 index.vue 组件中引入太多外部组件会产生什么问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 633 天前的主题，其中的信息可能已经有所发展或是发生改变。

本人写 ERP 项目的，一般结构就是在模块文件夹下建立一个 index.vue 以及一个 components 文件夹，把一些业务弹窗都写成一个单独的.vue 组件，然后放到 components 文件夹里面。最后在 index.vue 中去 import 这些弹窗。就是不知道一个 index.vue 中引入了很多底下的其他组件，对项目会有什么影响，还是说就这样写比较好。还请各位大佬指点指点

组件

Components

Vue

弹窗

7 条回复 • 2023-02-21 10:42:09 +08:00

learningman

2023-02-21 03:01:46 +08:00

引入太多会导致主 js 文件太大加载缓慢，可以适当 lazyload 一些

suzic

2023-02-21 09:11:12 +08:00 via Android

弹窗写成命令式的函数，每次调用时才生成，用完销毁，这样会好很多

CNZCC

2023-02-21 09:19:50 +08:00 via iPhone

@suzic 我在引入的组件上加一个 v-if ，每次调用的时候显示，这是不是也一样，哈哈

CNZCC

2023-02-21 09:21:02 +08:00 via iPhone

@learningman 主 js ？你指的是打包后发到线上环境，然后 chunk.js 会变大对吗？

horseInBlack

2023-02-21 09:43:47 +08:00

v-if 控制是否渲染到页面，组件还是会加载的

参考 vue-router 的官方指南：
路由懒加载
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')

CNZCC

2023-02-21 10:34:50 +08:00

@horseInBlack 好的，学习了

DICK23

2023-02-21 10:42:09 +08:00

其实问题不大，弹窗类的组件本身就不会有太多内容，如果是部署在内网，就更感知不了了