Question

我正在使用通过vue CLI引导的模板应用设置。我有一个具有20个嵌套div标记的组件。在开发模式下编译此类组件大约需要10秒钟。我将html元素嵌套得越深，花费的时间就越长，并且时间呈指数增长。

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

Answer 1

在这里回答我自己的问题：Bennett Dams在the link to this SO post之后，已经有人对此进行了调查，prettier库存在一个问题，vue-loader在内部使用了该库，特别是他们的模板编译器工具。已将此问题报告给了更漂亮的团队here和there，但尚未解决。

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

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

我已向vue-loader此处#1426的团队报告了此问题，要求提供配置选项以禁止使用更漂亮，因此希望它会得到研究。

在vue-loader中的prettify配置选项中对此进行修复。

旧解决方案：

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

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