uni-app新版hb添加video打包后体积变得非常大

针对uni-app新版hb（HBuilderX）添加video组件后打包体积变得非常大的问题，这通常是由于视频文件本身较大，或者打包过程中没有进行适当的优化处理导致的。以下是一些具体的代码示例和优化策略，帮助你减小打包体积：

1. 使用外部视频链接

如果视频文件不需要内置在应用中，可以直接使用网络链接。这样可以避免将大体积的视频文件打包进应用。

<template>
  <view>
    <video src="https://example.com/your-video.mp4" controls></video>
  </view>
</template>

2. 视频压缩

在将视频添加到项目中之前，使用视频压缩工具（如FFmpeg、HandBrake等）对视频进行压缩。

# 示例：使用FFmpeg压缩视频
ffmpeg -i input.mp4 -vcodec libx264 -crf 28 output.mp4

其中-crf参数控制压缩质量，数值越大压缩率越高，但质量越差。

3. 使用Base64编码（不推荐大文件）

对于非常小的视频文件，可以考虑将其转换为Base64编码并直接嵌入代码中（但这种方法对于大文件不适用，因为会显著增加代码体积）。

// 示例：将小视频文件转换为Base64并嵌入（伪代码）
const videoBase64 = 'data:video/mp4;base64,AAAAIGZ0eXBmp4v...';

<template>
  <view>
    <video :src="videoBase64" controls></video>
  </view>
</template>

4. 配置文件优化

在manifest.json和vue.config.js（或webpack.config.js，如果适用）中配置资源优化选项，如压缩、混淆等。

// manifest.json 示例
{
  "mp-weixin": {
    "appid": "your-app-id",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "enhance": true,
      "postcss": true,
      "min": {
        "webpackChain": function (chain) {
          // 自定义webpack配置，如压缩等
          chain.optimization.minimizer('terser').tap(args => {
            args[0].terserOptions.compress.drop_console = true; // 移除console
            return args;
          });
        }
      }
    }
  }
}

5. 拆分代码和资源

如果应用中有多个页面或模块，考虑使用按需加载和代码拆分，以减少初始包的大小。

// 示例：使用Vue的异步组件
const VideoPage = () => import('./pages/VideoPage.vue');

// 在路由配置中使用
{
  path: '/video',
  component: VideoPage,
  lazy: true
}

通过上述方法，你可以有效地减小uni-app在添加video组件后的打包体积。注意，选择具体方法时应根据项目的实际情况和需求来决定。