Aurelia生产构建在IE中加载缓慢,开发与预发布构建无此问题
这真是个棘手又有意思的兼容性坑!我之前在处理IE11和Webpack生产构建的项目时也踩过类似的雷,结合你的描述,咱们来拆解下原因和解决办法:
核心原因
本质上是Webpack生产构建默认的激进压缩选项和IE11的老旧JS引擎不兼容。当不生成Source Map时,Webpack 4默认的压缩器Terser会启用一些极致优化(比如变量折叠、纯getter优化),这些优化后的代码在IE11的引擎里会触发低效的执行路径——甚至是IE11 JS引擎的隐性bug,直接导致代码执行时间暴增。而当存在Source Map时,Terser会自动调整压缩策略,避开这些会让IE11卡顿的优化选项,所以加载速度就恢复正常了。
哪怕是Hello World项目,生产构建后的压缩代码也会触发这个问题,说明这是个普遍性的IE11+Webpack压缩兼容性问题,和你的业务代码无关。
解决方案
下面几个方法可以逐步尝试,基本能解决问题:
1. 调整Terser压缩配置,禁用IE11不友好的优化选项
找到你的webpack.config.js(Aurelia CLI生成的项目在aurelia_project/webpack.config.js),修改optimization.minimizer里的Terser配置,关闭那些会导致IE11卡顿的压缩选项:
const TerserPlugin = require('terser-webpack-plugin'); module.exports = { // ...其他配置 optimization: { minimizer: [ new TerserPlugin({ terserOptions: { compress: { // 禁用变量折叠,这是触发IE11卡顿的常见元凶 collapse_vars: false, // 禁用纯getter优化 pure_getters: false, // 可选:关闭其他可能有兼容性问题的激进选项 unsafe_comps: false, unsafe_math: false, }, // 强制输出IE11兼容的ES5代码 ecma: 5, ie8: true, }, }), ], }, };
修改后重新执行au build --env prod,IE11的加载时间应该会大幅缩短。
2. 保留分离式Source Map(无需嵌入)
如果不想调整压缩选项,可以在生产环境保留分离式的Source Map(而不是完全禁用)。这样Terser会自动调整压缩策略,同时bundle本身不会嵌入Source Map文件,不会增加bundle体积:
module.exports = { // ...其他配置 // 生产环境使用分离式Source Map devtool: 'source-map', };
部署时你可以选择是否上传.map文件——即使不上传,bundle的执行效率在IE11里也会恢复正常,因为压缩器的行为已经改变了。
3. 确保IE11的Polyfill齐全
有时候缺失的Polyfill也会导致代码执行异常缓慢(比如Promise、Array.prototype.includes等特性没有被Polyfill,代码里的 fallback 逻辑执行效率极低)。你可以在项目入口文件(比如main.js或main.ts)顶部添加:
import 'core-js/stable'; import 'regenerator-runtime/runtime';
或者通过@babel/preset-env配置自动注入所需的Polyfill,确保IE11支持所有代码中用到的ES6+特性。
4. 验证Aurelia CLI的默认配置
如果你用的是Aurelia CLI生成的项目,可能需要检查CLI的默认生产环境配置,确保它没有强制启用那些导致IE11卡顿的压缩选项。可以在aurelia_project/environments/prod.js里添加或修改对应的Webpack配置覆盖项。
验证方法
修改配置后,执行au build --env prod,然后在IE11中打开应用,观察加载时间——应该会回到和开发构建相近的速度(Hello World项目应该在1-3秒内显示内容)。
内容的提问来源于stack exchange,提问作者Brian

