Uniapp 优化打包大小1. 按需加载组件按需引入：只引入和使用你需要的组件或库，而不是整个库。例如，使用 uni-

1. 按需加载

组件按需引入：只引入和使用你需要的组件或库，而不是整个库。例如，使用 uni-ui 时，只引入所需的组件，而不是整个组件库。
```
// 只引入 Button 组件
import { Button } from 'uni-ui';
```
动态加载：使用动态导入来实现按需加载模块。这样只有在需要时才会加载相关的模块。
```
// 使用 dynamic import
const LazyComponent = () => import('./LazyComponent.vue');
```

2. 分包加载

分包加载是一种将应用的不同部分分开打包的方法，以减少初始加载时的包体积。uniapp 支持在小程序（如微信小程序）中进行分包加载。

实现步骤

配置 pages.json

在 pages.json 中配置分包。将部分页面配置到子包中，并指定主包和子包的路径。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/logs/logs",
      "style": {
        "navigationBarTitleText": "日志"
      }
    }
  ],
  "subPackages": [
    {
      "root": "subpkg",
      "pages": [
        {
          "path": "pages/detail/detail",
          "style": {
            "navigationBarTitleText": "详情"
          }
        }
      ]
    }
  ]
}

在这个示例中，pages/detail/detail 页面被放置在 subpkg 子包中。这样，只有在用户访问到该页面时才会加载该子包，减少了主包的体积。

优化资源管理

确保子包中的资源（如图片、样式表、脚本）也位于子包目录下，以避免资源在主包中被重复打包。
动态加载子包

你可以在代码中动态加载子包，以进一步优化性能。例如：
```
uni.navigateTo({
  url: '/subpkg/pages/detail/detail'
});
```
这样只有在实际导航到 detail 页面时，才会加载 subpkg 子包。

3. 图片和资源优化

压缩图片：使用压缩工具（如 TinyPNG）来减小图片文件的大小，避免使用过大的图片文件。
使用 WebP 格式：如果平台支持，使用 WebP 格式的图片，因为它通常比 PNG 和 JPEG 格式的图片小。
按需加载资源：只加载用户当前需要的资源，避免一次性加载所有资源。

4. 代码分割

配置路由懒加载：在 uniapp 的路由配置中，使用懒加载来分割代码，从而减少初始加载时的包体积。

// 在 pages.json 中配置路由懒加载
{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "Home"
      }
    },
    {
      "path": "pages/details/details",
      "style": {
        "navigationBarTitleText": "Details"
      }
    }
  ]
}

5. 避免不必要的代码

清理无用代码：移除未使用的代码和依赖，确保只打包必要的内容。
使用工具检测包大小：使用如 Webpack 的 Bundle Analyzer 工具来检查包的组成部分，找出并优化大型依赖和模块。

6. 使用轻量级库和工具

选择轻量级库：使用轻量级的替代库或工具，例如选择 dayjs 代替 moment，以减少包体积。
优化依赖：检查依赖库是否存在更小或更高效的替代品。

7. 配置 `uniapp` 打包选项

使用 vue.config.js 进行构建优化：在 vue.config.js 文件中配置构建选项，启用代码压缩和优化。

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  },
  // 开启 gzip 压缩
  devServer: {
    compress: true,
  },
};

使用 uni-app 的构建优化配置：在 manifest.json 中配置构建选项，设置构建模式和其他优化选项。

8. 减少第三方插件和组件

优化插件使用：尽量减少对第三方插件的依赖，选择最小化功能实现的插件。
按需加载插件：如有必要，只在需要的地方加载插件，避免全局引入不必要的插件。

9. 使用生产模式构建

生产环境构建：确保在生产环境中构建时使用优化选项，例如代码压缩和删除调试信息。
```
npm run build -- --prod
```

10. 审查和优化 CSS

去除未使用的 CSS：使用工具如 PurgeCSS 来去除未使用的 CSS 代码，减少样式表的体积。
优化样式表：避免使用大量的内联样式和大规模的 CSS 文件。

11. 页面优化代码

uniapp底部安全区域

    /* 底部安全区域 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

只给盒子顶部阴影

box-shadow: 0px -5px 10px -2px rgba(180, 180, 180, 0.3);

底部定位条

.footBox {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    padding: 18rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 底部安全区域 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0px -5px 10px -2px rgba(180, 180, 180, 0.3);
  }

运行的时候注意勾选压缩代码:

HBuilder编辑器运行》运行到小程序模拟器》运行时是否压缩代码

Uniapp 优化打包大小