Vue 在开发模式下编译这个 HTML 模板非常慢

Question

我正在使用通过 vue CLI 引导的模板应用程序设置。我有一个包含 20 个嵌套div标签的组件。在开发模式下编译这样的组件大约需要 10 秒。我将 html 元素嵌套得越深，所需的时间就越长，并且时间呈指数增长。

这种行为正常吗？有没有办法改善编译时间？

Answer 1

这里回答我的问题：下面的链接本SO后由贝内特水坝，有些人已经调查了这一点，并有与问题prettier库得到由内部使用的vue-loader，特别是他们的模板编译器工具集。该问题已报告给这里和那里的更漂亮的团队，但尚未解决。

因此，vue 模板编译器开箱即用地附带了这个问题。因此，如果您嵌套 ~30 个 html 元素，您基本上可以停止编译器（仅在开发模式下发生）。

当您的嵌套（~4-5）级元素较少时也是如此，但其中一些，在这种情况下编译会逐渐变慢并且重新加载/注入时间会受到影响，这使得等待您的组件重新加载很痛苦。

我已经向vue-loader这里的团队报告了这个问题#1426，要求提供一个配置选项来禁用 prettier 的使用，所以希望它会被查看。

更新：现在应该vue-loader通过prettify添加的配置选项修复：https : //github.com/vuejs/vue-loader/issues/1426

旧解决方案：

目前，唯一的解决方法是编辑node_modules/@vue/component-compiler-utils/dis/compileTemplate.js注释掉该行（应该在第 97 行左右），如下所示：

//code = prettier.format(code, { semi: false, parser: 'babylon' });