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

Question

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

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

Answer 1

在这里回答我自己的问题：按照 Bennett Dams 的这篇 SO 帖子的链接，有些人已经对此进行了调查，并且vue-loader内部使用的prettier库存在问题，特别是他们的模板编译器实用程序。 该问题已报告给这里和那里的更漂亮的团队，但尚未解决。

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

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

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

更新：现在应该通过添加的prettify配置选项在vue-loader修复： 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' });