uni-app（小程序）

最近更新时间：2024-04-08 18:01:02

我的收藏

本页目录：

vue2 和 vue3 打包小程序包体积常见问题和方案
是否压缩代码？
以 TUICallKit-Vue2 demo 举例，下图给出了是否勾选运行时是否压缩代码的效果对比（851KB -> 454KB，降低 50%）：
﻿
﻿
 
﻿
﻿
因此：HBuilder 中运行 > 运行到小程序模拟器 > 勾选运行时是否压缩代码，具体参考下图：
﻿
﻿
﻿
≤ v1.4.4
依赖包如何不打入到主包的 common/vendor.js？
在使用 微信开发者工具 里 构建 npm 时，我们希望 HBuilder 打包小程序时，不将 node_module 中的依赖打入到主包的 common/vendor.js 中（这会导致依赖存在多份，影响主包体积）。推荐通过配置 vue.config.js 实现。
vue.config.js 可选配置文件需放置在项目根目录下。
vue.config.js 一般用于配置 webpack 等编译选项。HBuilder 采用 vue2 开发小程序，构建、打包时 vue.config.js 会被自动加载。
以 TUICallKit-Vue2 demo 举例，下图给出依赖包不打入主包的 common/vendor.js 的效果对比（805KB -> 256KB，降低 68%）：
﻿
﻿
 
﻿
﻿
具体使用如下：
1. 页面中通过 require 引入包依赖：
// 页面中引入方式必须使用 require，不能使用 import 的方式
const TIM = require('tim-wx-sdk'); 
2. vue.config.js 配置如下：
// vue.config.js 配置
module.exports = {
  configureWebpack: {
      externals: {
          'tim-wx-sdk': 'commonjs tim-wx-sdk', // 550KB 左右
      },
  }
}
具体目录结构如下截图：
    
﻿
﻿
注意：
页面中引入依赖包的方式必须使用 require，不能使用 import 方式！
原因：通过 import 引入时，HBuilder 打包小程序后，会将 import 引入方式进行编译。从而导致无法使用 node_modules 中的 tim-wx-sdk。而 require 的方式则不会被编译。
如何构建 npm？
1. 通过和 uni-app 的技术人员沟通了解到，目前 HBuilder 中不支持类似微信开发者工具中的构建 npm。而且他们也没有支持的计划。
2. HBuilder 中 运行 > 运行到小程序模拟器 生成的小程序项目，会清除 package.json、node_modules 等文件。具体如下图：
﻿
﻿
  
﻿
﻿
如果想在微信开发者工具 > 工具 > 构建 npm，就必须在 微信开发者工具的终端里创建 package.json、npm install 安装依赖。然后才能构建 npm。具体如下：
﻿
﻿
 
﻿
﻿
npm init -y && npm install xx
如何使用 copy-webpack-plugin 提升效率？
Vue2
上面 如何构建 npm 中，需要在微信开发者工具的终端里创建 package.json，然后安装依赖才行。通过 copy-webpack-plugin 可减少该步骤，并提升效率。
以 TUICallKit-Vue2 Demo 举例，下图给出使用 copy-webpack-plugin 的前后对比： 
﻿
﻿
 
﻿
﻿
具体使用如下：
1. 安装 copy-webpack-plugin：
注意：
最新版本 copy-webpack-plugin 插件暂不兼容，推荐 v5.0.0（锁死版本）。
npm install -D copy-webpack-plugin@5.0.0
2. 在 vue.config.js 中使用 copy-webpack-plugin 插件，具体如下：
// vue.config.js 配置
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  configureWebpack: {
      plugins: [
          new CopyWebpackPlugin([
              {
                  from: path.join(__dirname, '/node_modules/@tencentcloud/call-uikit-wechat'),
                  to: path.join(__dirname, '/unpackage/dist/dev/mp-weixin/node_modules/@tencentcloud/call-uikit-wechat')
              },
              {
                  from: path.join(__dirname, '/node_modules/trtc-wx-sdk'),
                  to: path.join(__dirname, '/unpackage/dist/dev/mp-weixin/node_modules/trtc-wx-sdk')
              },
              {
                  from: path.join(__dirname, '/node_modules/tim-wx-sdk'),
                  to: path.join(__dirname, '/unpackage/dist/dev/mp-weixin/node_modules/tim-wx-sdk')
              },
              {
                  from: path.join(__dirname, '/node_modules/tsignaling-wx'),
                  to: path.join(__dirname, '/unpackage/dist/dev/mp-weixin/node_modules/tsignaling-wx')
              },
              {
                  from: path.join(__dirname, '/node_modules/tuicall-engine-wx'),
                  to: path.join(__dirname, '/unpackage/dist/dev/mp-weixin/node_modules/tuicall-engine-wx')
              },
              {
                  from: path.join(__dirname, '/package.json'),
                  to: path.join(__dirname, '/unpackage/dist/dev/mp-weixin/package.json')
              }
          ])
      ]
  }
}
具体目录结构如下截图：
﻿
﻿
﻿
﻿
错误提示“The package you purchased does not support this ability”？
如遇以上错误提示，是由于您当前应用的音视频通话能力包过期或未开通，请参见 步骤3：开通服务，领取或者开通音视频通话能力，进而继续使用 TUICallKit 组件。
如何购买套餐？
请参考购买链接：音视频通话 SDK 购买指南，如有其他问题，请点击页面右侧，进行售前套餐咨询。
通话邀请的超时时间默认是多久？
通话邀请的默认超时时间是30s。