模块
在 Zova 中可以通过模块把页面、组件、配置、语言等资源打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具
为什么要实现模块化体系?
不知你是否认同一个架构理念:如果要避免香山
的形成,那就把香
装进集装箱里。
在一个大型的 Web 业务系统当中,随着业务的增长和变更,为了避免代码失控,也有必要将系统拆分为一个个相对独立的模块,这就是 Zova 采用模块化体系的缘由。因此,在 Zova 中,实际的业务代码开发都是在模块中进行。
模块化体系的意义
业务层面
- 业务解耦:代码结构清晰,业务逻辑充分解耦
- 业务逻辑复用:以模块为开发单元,便于沉淀技术资产,便于在不同的系统中重复利用
- 分工协作、团队开发:将业务系统拆分成模块的组合,有利于开发任务的分解与分配
代码层面
- 命名空间隔离:模块的命名空间隔离机制有利于减少开发时的心智负担,当我们在为模块内部的组件、配置等资源进行变量命名时,不必担心此名称会与其他模块冲突,从而也可以使得变量命名更加精简、自然
- 构建拆包更容易:在 Zova 中,一个模块就是一个天然的拆包边界,在 build 构建时,自动打包成一个独立的异步 Chunk,告别 Vite 配置的烦恼,同时可以有效避免构建产物的碎片化。特别是在大型业务系统中,这种优势尤其明显
命名约定
为了实现命名空间隔离,Zova 对模块采用如下命名约定:
bash
完整名: zova-module-{providerId}-{moduleName}
短名: {providerId}-{moduleName}
- providerId: 提供者 Id。可以将某个功能或者特性作为 providerId,比如:test, demo, blog, dashboard, flow 等等
- moduleName: 模块名称
新建模块
TIP
右键菜单 - [项目路径/src/module]: Zova Create/Module
右键菜单 - [项目路径/src/module-vendor]: Zova Create/Module
右键菜单 - [项目路径/src/suite/suite-name/modules]: Zova Create/Module
右键菜单 - [项目路径/src/suite-vendor/suite-name/modules]: Zova Create/Module
依据提示输入模块的名称,比如test-home
,VSCode 插件会自动创建模块的代码骨架
社区文章
摘录:我们在使用Vite进行打包时,经常会遇到这个问题:随着业务的展开,版本迭代,页面越来越多,第三方依赖也越来越多,打出来的包也越来越大。如果把页面都进行动态导入,那么凡是几个页面共用的文件都会进行独立拆包,从而导致大量chunk碎片的产生。许多chunk碎片体积都很小,比如:1k,2k,3k,从而显著增加了浏览器的资源请求