uniapp启动treeShaking打h5生产包,打出来的页面报错,如何排查?

RockerLau
  • 326
问题描述

uniapp,打h5生产包,打包过程没有报错,成功输出dist,访问页面的时候报错(如下图)
image222.png
经排查,在manifest.json处,关闭treeShaking就没有报错了,但我还是希望找到原因,继续用上treeShaking的功能

环境与版本
  • Mac、Window10均有这种情况
  • "@dcloudio/uni-h5": "2.0.0-25120200103006"
  • "@dcloudio/vue-cli-plugin-uni": "2.0.0-25120200103006"
  • "@dcloudio/vue-cli-plugin-uni-optimize": "2.0.0-25120200103006"
打包命令
cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode prod
manifest.json
{

"name": "xxxx",

"appid": "xxxx",

"description": "xxx",

"versionName": "xxxx",

"versionCode": "100",

"transformPx": false,

"uniStatistics": {

"enable": true

},

"networkTimeout" : {

"request" : 150000,

"connectSocket" : 15000,

"uploadFile" : 15000,

"downloadFile" : 15000

},

"h5": {

"usingComponents": true,

"devServer": {

"https": false

},

"publicPath": "/xxx",

"template": "index.html",

"optimization": {

"treeShaking": {

"enable": true

}

}

},

"safearea": {

"background": "#CCCCCC",

"bottom": {

"offset": "auto"

}

}

}
信息补充
  • mall分支,线上版本,h5设置了treeShaking可以访问,没有报错
  • mastertmp分支,开发分支,改造大版本
我的尝试和思路

我的尝试步骤:

  1. 基于mastertmp分支,安装依赖(上述环境和版本),跑开发环境命令,打开浏览器,展示正常,没有报错
  2. 切换到mall分支,跑生产环境命令,生成页面后,挂载服务器下,展示正常,没有报错
  3. 切换到mastertmp分支,跑生产环境,生成页面后,挂载服务器下,报错如上图
  4. 基于mastertmp分支,manifest.json去掉uniStatistics,没有上图的报错,但是跑业务代码的时候,遇到使用uni.x的API都会报类似的错误
  5. 基于mastertmp分支,manifest.json去掉treeShaking功能,一切正常

我的排查:

  1. 依赖包问题,排除。从步骤1和步骤2可知,可以排除依赖包的问题,因为在步骤1安装依赖后,再到步骤2跑的。是基于mastertmp的依赖的
  2. 我的编译条件写错了的问题(编译条件的使用,成对规则、语法规则),排除。排查过没有问题
  3. 我的业务代码问题,排除。page.json去掉所有业务页面,留下一个hello world页面,查看App.vue、main.js代码,去掉没有必要的引用,还是会报错
  4. 代码使用了require语法,影响了treeShaking,排除。把涉及的代码都改为import和export了,还是会报错
我的请求
  • 请哪位大佬帮忙看看,提供排查的思路?
回复
阅读 1.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏