vue2 和 vue3 打包小程序包体积常见问题和方案
是否压缩代码?
因此:HBuilder 中运行 > 运行到小程序模拟器 > 勾选运行时是否压缩代码,具体参考下图:
依赖包如何不打入到主包的 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
会被自动加载。
具体使用如下:
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
提升效率?
上面 如何构建 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”?
如何购买套餐?
通话邀请的超时时间默认是多久?
通话邀请的默认超时时间是30s。
融合场景,如何配置 roomID、timeout、offlinePushInfo 等参数?
这里以 roomID 字段为例,更多字段可详细参见官网文档:
Web
小程序
注意:
uni-app 客户端接口参数和 Web、小程序有差异。
1v1通话
工具栏拨打通话处配置:
消息扩展处通话配置:
群通话
工具栏拨打群通话处配置: