uni-halo/.agents/bak-skills/uniapp-uview/examples/advanced/build-optimization.md

Build Optimization

构建优化

优化 UniApp + uView 项目的构建和性能。

代码分割

使用条件编译减少代码体积：

<template>
  <view>
    <!-- #ifdef H5 -->
    <u-button>H5 按钮</u-button>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <u-button>小程序按钮</u-button>
    <!-- #endif -->
  </view>
</template>

组件按需引入

虽然 easycom 会自动引入，但可以优化：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    }
  }
}

图片优化

<template>
  <view>
    <!-- 使用 webp 格式（H5） -->
    <!-- #ifdef H5 -->
    <image src="/static/image.webp"></image>
    <!-- #endif -->
    
    <!-- 使用 png 格式（小程序） -->
    <!-- #ifdef MP-WEIXIN -->
    <image src="/static/image.png"></image>
    <!-- #endif -->
  </view>
</template>

样式优化

<style lang="scss" scoped>
/* 使用 scoped 避免样式污染 */
.container {
  /* 样式 */
}
</style>

打包配置

在 manifest.json 中配置打包选项：

{
  "mp-weixin": {
    "setting": {
      "minified": true,
      "postcss": true
    }
  },
  "h5": {
    "optimization": {
      "treeShaking": {
        "enable": true
      }
    }
  }
}

注意事项

1. 条件编译：使用条件编译减少代码体积
2. 图片优化：使用合适的图片格式和大小
3. 样式优化：使用 scoped 避免样式污染
4. 打包配置：正确配置打包选项
5. 性能测试：在不同平台测试性能