Vue在开发人员模式下编译此HTML模板非常慢

时间:2018-11-09 13:30:39

标签: javascript vue.js vuejs2 vue-component

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

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

下面是一个示例:https://gist.github.com/dmitrybelyakov/ed64145624f42188372500018671eb0f

1 个答案:

答案 0 :(得分:2)

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

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

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

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

更新:现在应该通过添加的https://github.com/vuejs/vue-loader/issues/1426

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

旧解决方案:

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

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