uniapp 组件分包

组件分包的概念

在UniApp中，组件分包是一种优化手段，通过将非核心组件或页面拆分到独立的分包中，减少主包体积，提升首次加载速度。适用于项目较大、组件较多的情况。

分包配置方法

1. 修改 manifest.json
   在 manifest.json 的 mp-weixin 或其他平台配置段中，添加 optimization 字段启用分包优化：

   "mp-weixin": {
     "optimization": {
       "subPackages": true
     }
   }

2. 配置分包路径
   在 pages.json 中定义分包结构，例如：

   {
     "subPackages": [
       {
         "root": "subpackageA",
         "pages": [
           { "path": "componentA/index", "style": { ... } }
         ]
       }
     ]
   }

   • root 为分包根目录。
   • pages 列出分包内的页面路径。

3. 组件放置与引用

   • 将组件文件（如 .vue）放入分包目录（如 /subpackageA/components）。
   • 在页面中引用时，路径需基于分包根目录：

     import ComponentA from '@/subpackageA/components/ComponentA.vue';

注意事项

• 主包限制
  主包大小需控制在平台限制内（微信小程序主包不超过2MB）。

• 跨分包引用
  分包组件不能直接被其他分包引用，需通过主包中转或重复放置。

• 预下载配置
  在 pages.json 中可通过 preloadRule 配置分包预加载，提升用户体验：

  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["subpackageA"]
    }
  }

动态加载组件

对于需要按需加载的组件，可使用 require 动态引入：

const ComponentB = require('@/subpackageB/components/ComponentB.vue');

分包构建检查

运行构建命令后，通过控制台输出或开发者工具查看分包大小分布，确保主包未超限。

通过合理规划分包结构，能有效平衡加载性能和功能完整性。