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' });