javascript - Vue3 + Vite2 打包后在 Chrome 49 下栈溢出问题如何解决？

Question

Vue3 + vite2 打包后在chrome49内核下发生栈溢出？

今天发现一件很苦恼的事情，vue3 + vite2打包后发现在chrome49内核下发生栈溢出，而在84内核下则不会出现这个问题！

原因是我在打包时用了不同的命令：
测试环境打包：
vite build --mode testing
生产环境打包：
vite build --mode production

而两个环境中只有一处不同：
.env.test

VITE_APP_ENV=testing

当我把这个值修改为：

VITE_APP_ENV=production

栈溢出就消失了，有哥哥知道为什么嘛？

我用的vue版本是3.2.19，vite是2.6.8
打包命令：

Answer 1

问题解答

在 Vue3 + Vite2 的项目中，遇到在 Chrome 49 内核下发生栈溢出，而在较新版本的 Chrome（如 Chrome 84）中不出现此问题，通常与几个可能的原因相关：

1. 代码兼容性：Chrome 49 是一个较旧的浏览器版本，可能不完全支持现代 JavaScript 的某些特性，尤其是 ES6+ 的新语法和特性。Vue 3 和 Vite 2 可能在构建过程中使用了这些新特性，导致在旧版 Chrome 中运行时出现问题。
2. 代码优化与压缩：在将 VITE_APP_ENV 设置为 production 时，Vite 的构建过程会启用更严格的代码压缩和优化。这些优化可能包括移除了一些在老版浏览器中可能引发问题的代码段，或者调整了代码结构以更好地兼容旧浏览器。
3. Polyfills（填充库）：在开发现代 web 应用时，通常需要为旧浏览器提供兼容性支持。Vite 可能会在 production 模式下自动添加或调整这些 polyfills，以确保应用的兼容性。

解决方案

1. 升级浏览器：首先，考虑升级用户的浏览器到更现代的版本。Chrome 49 已经是非常旧的版本，存在许多安全漏洞和性能问题。
2. 条件编译或特性检测：在代码中添加条件编译或特性检测逻辑，确保在旧浏览器中不使用那些不兼容的特性。
3. 使用 Polyfills：如果必须支持旧版浏览器，确保在项目中包含了所有必要的 polyfills。可以在 Vite 的配置文件中添加或修改 polyfills 的设置。
4. 详细审查构建配置：检查 Vite 的配置文件，特别是与构建优化和兼容性相关的设置。确保在 production 和其他环境之间的一致性。
5. 测试和调试：在多个版本的浏览器上进行广泛的测试，特别是那些你认为可能出现问题的浏览器版本。使用浏览器的开发者工具进行调试，以了解具体的栈溢出原因。
6. 查阅文档和社区：查看 Vue 和 Vite 的官方文档，以及相关的社区和论坛，看看是否有其他开发者遇到并解决了类似的问题。

示例

如果决定在 Vite 配置中添加 polyfills，可以在 vite.config.js 文件中进行如下设置（示例）：

// vite.config.js
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'] // 根据需要调整目标浏览器
    })
  ]
});

请注意，上述代码是一个示例，并且可能需要根据你的具体需求进行调整。