Appearance
体积与分包策略(Web + 微信小程序)
Web 管理端(frontend/)
原则:适度 vendor 分包 + 路由懒加载,不追求把警告压到 0。
| 手段 | 位置 | 说明 |
|---|---|---|
| 路由懒加载 | src/router/route-component-registry.ts | 各业务页 () => import(...),按访问加载 |
| Vendor 分包 | frontend/vite.config.ts → build.rollupOptions.output.manualChunks | naive-ui、echarts、app-vendor(vue/pinia/router/i18n)、vicons |
| 警告阈值 | chunkSizeWarningLimit: 1024 | 管理端单 chunk 超 500kB 常见;已拆 vendor 后仅降噪 |
| 传输压缩 | frontend/vite-plugins/taskflow-gzip.ts + deploy/docker/nginx/snippets/gzip.conf | 构建产出 .gz 侧车 + Nginx gzip_static / 动态 gzip;不减 dist 体积,减用户下载字节 |
注意:登出清动态路由走静态模块 src/lib/auth-logout-cleanup.ts;勿在 auth 里对已在 main.ts 加载的 router / permission-routes 再写 import()(构建会报 INEFFECTIVE_DYNAMIC_IMPORT)。web-openid-refresh 对 auth store 保留一处 import() 用于打破环依赖,属正常。
生产传输压缩(gzip)
| 环节 | 位置 | 说明 |
|---|---|---|
| 构建预压缩 | frontend/vite.config.ts、docs/.vitepress/config.ts | 共用 frontend/vite-plugins/taskflow-gzip.ts;生产构建为 js/css/html/… 生成同名 .gz |
| Nginx | deploy/docker/nginx/snippets/gzip.conf | gzip on + gzip_static on;主站 nginx-frontend.conf、7001 文档 nginx-entrypoint-docs.sh 均 include |
| API 反代 | 同上 gzip_proxied any | 大 JSON 列表响应可压缩 |
验证(部署后):Network 面板看静态资源 Content-Encoding: gzip,Transferred 明显小于 Size。
bash
curl -H "Accept-Encoding: gzip" -I http://<host>/assets/index-*.js小程序不走 HTTP gzip;体积仍靠 subPackages 与 check:miniapp:weixin。
本地构建:
bash
pnpm --filter frontend run build微信小程序(miniapp/)
原则:体积靠 pages.json 的 subPackages(业务分包),不靠 Vite 的 JS chunk 拆分。
主包(pages)
仅保留启动与 tabBar 必需页:
pages/index/index(首页)pages/login/loginpages/me/profile、pages/notify/worker-notifications(自定义 tabBar,必须在主包)
业务分包(subPackages)
| name | root | 场景 |
|---|---|---|
| pkg-me | pages/me-sub | 个人信息、账号、人员认证 |
| pkg-bookkeeping | pages/bookkeeping | 个人记账 |
| pkg-config-quote | pages/config-quote | 清单计价 |
| pkg-worker | pages/worker | 工人记工、报工登记 |
| pkg-recorder | pages/recorder | 生产、入出库、库存、报工审核 |
| pkg-manager | pages/manager | 结算、发放、报表 |
新增业务页:优先放进对应 subPackages,不要堆进主包 pages。
CI 门禁
bash
pnpm run check:miniapp:weixin主包须 < 2048KB(scripts/verify-miniapp-main-package.mjs,分包目录从 pages.json 自动读取)。
与 Web 的差异
- 微信 tabBar 页不能迁到分包。
- H5 构建时的 Vite chunk 警告不代表小程序主包体积,以
check:miniapp:weixin为准。