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

V2EX = way to explore

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

For Existing Member Sign In

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1167 days ago, the information mentioned may be changed or developed.

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

组件

Components

Vue

弹窗

7 replies • 2023-02-21 10:42:09 +08:00

learningman

Feb 21, 2023

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

suzic

Feb 21, 2023 via Android

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

CNZCC

Feb 21, 2023 via iPhone

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

CNZCC

Feb 21, 2023 via iPhone

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

horseInBlack

Feb 21, 2023

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

Feb 21, 2023

@horseInBlack 好的，学习了

DICK23

Feb 21, 2023

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