1. 问题描述:
页面发布线上机器后H5页面A报错:@babel/polyfill;但是测试环境机器、仿真环境机器下H5页面A均无问题。
2. 问题表象原因
当前工程下一个通用util文件中使用了async,但是问题页面及组件并未引入common/utils文件。线上打包后,babel不支持async/await语法,导致报错 regeneratorRuntime is not defined
3. 问题排查思路
3.1 当前页面及组件未使用到util文件为什么会打包进去?
npm install --save-dev webpack-bundle-analyzer@3.9.0
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'server', // 可选值:server | static | disabled
analyzerHost: '127.0.0.1', // 默认 localhost
analyzerPort: 8888, // 默认 8888
reportFilename: 'report.html', // 生成报告的文件名
openAnalyzer: true, // 是否自动打开浏览器
generateStatsFile: false, // 是否生成 stats.json
statsOptions: null, // stats 配置
logLevel: 'info' // 日志级别
})
);
export NODE_OPTIONS=--max-old-space-size=10240 && ykit pack
3.2 webpack-bundle-analyzer分析,观察打包产物引入了目标文件“common/utils”.
3.3 排出全局引入:注释掉非必要代码,发现没有打包common/util文件
3.4 二分法发现:文件中引入import {axios, qs} from '$common/utils'的方法。但是common/util会被打包进去
我们HY工程没有配置Tree Shaking?所以打包的时候会默认打包进整个模块?
2. 为什么退款申请页中无问题,但是页面A存在问题?
退款申请页中引入了@babel/polyfill用来处理语法运行时的依赖。
错误页面A未引入@babel/polyfill
3. 为什么测试环境机器无问题,线上环境机器有问题
暂无结论
排除node版本差异、排除代码上下文差异、排除浏览器环境差异、