uniapp ui组件都被打包到主包里了如何优化？

在uniapp开发中，发现所有UI组件都被打包到了主包里，导致主包体积过大。请教各位如何优化这种情况？希望能按需加载组件或分离打包，减小主包大小。有没有具体的配置方法或插件推荐？

2 回复

使用分包加载，将UI组件移到独立分包中。按需引入组件，避免全局注册。压缩代码，利用webpack的tree shaking删除未使用代码。


在UniApp中，UI组件默认打包到主包会导致主包体积过大，影响应用加载速度。以下是优化建议：

  1. 使用分包加载：

    • 将UI组件移至独立分包，减少主包体积。
    • 在 pages.json 中配置分包，示例：
      {
  "subPackages": [
    {
      "root": "subpackage",
      "pages": [
        {
          "path": "ui-components/page1",
          "style": {}
        }
      ]
    }
  ]
}
    • 将UI组件相关页面和资源放在 subpackage 目录。

  2. 按需引入组件：

    • 如果使用 uni_modules 或第三方UI库（如uView），确保按需导入，避免全量引入。
    • 示例（uView）：
      // 只引入必要组件
import { uButton, uInput } from 'uview-ui';

  3. 压缩和优化资源：

    • 使用工具压缩图片、代码，移除未使用的CSS/JS。
    • 在 manifest.json 中开启压缩选项：
      {
  "h5": {
    "optimization": {
      "treeShaking": {
        "enable": true
      }
    }
  }
}

  4. 懒加载组件：

    • 对于非首屏组件，使用动态导入或 v-if 延迟加载。

  5. 检查依赖：

    • 运行 npm run build:mp-weixin（以微信小程序为例）分析包体积，移除未使用的依赖。

通过分包和按需加载，主包体积可显著减小，提升加载性能。注意测试分包后的功能正常性。

回到顶部