工程util文件线上不支持async语法问题

56 阅读1分钟

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版本差异、排除代码上下文差异、排除浏览器环境差异、