uni-app代码包过大

### 如何减小 uni-app 打包后文件大小的最佳实践

#### 优化资源管理
移除不必要的静态资源可以显著减少打包后的体积。检查 `static` 文件夹中的图片、音频和其他大尺寸文件，删除未使用的部分。

对于 CSS 和 JavaScript 资源，确保只加载当前页面所需的模块而不是整个应用的所有样式和脚本[^2]。

// 动态导入组件以实现按需加载
const MyComponent = () => import('@/components/MyComponent.vue');

#### 图片处理与压缩
采用合适的图像格式并对其进行无损或有损压缩。例如 PNG 对于透明度支持较好但文件较大；JPEG 更适合照片类素材且占用空间较小。还可以考虑 WebP 这种现代浏览器兼容较好的高效编码方式。

针对不同分辨率设备提供相应版本的图标集（如 Retina 屏幕），通过 media query 或者 picture element 来适配最佳质量下的最小化展示效果[^1]。

/* 使用媒体查询来适应不同的屏幕密度 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url('~@/static/logo-retina.png'); /* 高清版 */
    }
}
.logo {
    background-image: url('~@/static/logo-standard.png'); /* 标准版 */
}

#### 移除调试信息和服务端接口日志
发布模式下关闭 Vue Devtools 并清理掉所有的 console.log() 输出语句以及多余的注释内容。这些虽然不影响功能但是会增加最终产物的数据量。

另外需要注意 API 请求返回的结果也要尽可能简洁明了，去除冗余字段从而降低传输成本。

#### 合理设置编译选项
利用 webpack 提供的各种插件来进行 tree shaking 操作即自动分析依赖关系图谱进而剔除非必要的库函数调用。同时开启 Gzip 压缩机制使得文本型资产在网络上传输时更加紧凑快速。

在 HBuilderX 中调整构建参数，启用 uglifyjs-webpack-plugin 实现混淆压缩 js 文件的目的[^3]。

{
  "build": {
    "cdn": false,
    "compress": true, // 开启 gzip/brotli 等压缩算法
    ...
  },
  "devServer": {
    "disableHostCheck": true,
    "overlay": {
      "warnings": false,
      "errors": false
    }
  }
}