前端多模块如何管理？

Question

版本

vite: 5.2.8
vue: 3.4.21

项目中有以下几个模块

• common - 公共模块，几个模块都会用到的工具等
• manage - 业务管理
• system - 系统管理
• user - 用户使用的模块

每个模块都是独立的vue工程，其他3个模块都依赖common；
并使用yarn link方式导入；

起初这样做是为了让各个模块的依赖包版本保持一致。3个模块的package.json中几乎没有写依赖包，都写在了common/package.json中，安装common的时候会把它的依赖包也一起安装。

这导致的问题是3个模块yarn build后都很大，build后的结果包含了所有的依赖包；

问题

1. 多模块如何管理比较合适？
2. 如何做到公共代码写在common中，build的模块用到那些代码就打包那些，减小体积？

Answer 1

build 后的内容大，大概率是没有使用 esm 导致 tree-shaking 失效。vite 和 webpack 打包都可以识别实际使用到的内容，但是前提都是使用 esm。

使用 yarn link 问题并不大，如果你是把 common 打包后给其他项目使用，那最好输出一份 esm 的构建版本。如果其他项目是直接使用 common 的源码，那么其他的几个项目打包时应该会自动 tree-shaking 。

Answer 2

pnpm + turborepo