用vue-cli构建深层嵌套的html需要永远

Question

我发现vue-cli(2.9.6,但3.0.0 beta*有相同的问题)的构建过程需要一旦模板的html相对深入.

例如,我刚添加了一些预先包含的divs App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div><div><div><div></div></div></div></div>
    <HelloWorld/>
  </div>
</template>

这花了很长时间.

但一旦得到这个:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
    <HelloWorld/>
  </div>
</template>

然后建筑过程需要永远,我相信这个深度的巢并不是那么罕见.

我该如何处理这个问题？

编辑(详细内容)

似乎问题可能是特定于环境的,所以这里有详细信息.

至少可以使用这些环境重现此问题:

• Mac mini上的macOS High Sierra(2014年末)
• 戴尔XPS 13上的Ubuntu 18.04

和节点和npm版本是:

node --version
# prints
v8.9.4
# and
npm version
# prints
{ npm: '6.1.0',
  ares: '1.10.1-DEV',
  cldr: '31.0.1',
  http_parser: '2.7.0',
  icu: '59.1',
  modules: '57',
  nghttp2: '1.25.0',
  node: '8.9.4',
  openssl: '1.0.2n',
  tz: '2017b',
  unicode: '9.0',
  uv: '1.15.0',
  v8: '6.1.534.50',
  zlib: '1.2.11' }

有了这些,我在Mac上重试了以下内容:

npm uninstall -g vue-cli
npm install -g vue-cli
vue init webpack divnest
# then some Enter keys - everything is default
cd divnest

然后,打开App.vue并放入许多div:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
    <router-view/>
  </div>
</template>

(因为我在这里使用默认设置,<router-view/>与原始帖子不同,但不应该是问题.)

最后,

npm run dev

这需要永远 - 具体来说,过程在此时停止:

 13% building modules 28/31 modules 3 active ...myname/Documents/divnest/src/App.vue

如果是

npm run build

,此过程在此时停止:

> divnest@1.0.0 build /Users/myname/Documents/divnest
> node build/build.js

Hash: 483ebabc54d5aed79fd7
Version: webpack 3.12.0
Time: 13742ms
                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.7fed9fa7b7ba482410b7.js     112 kB       0  [emitted]  vendor
                  static/js/app.f1ebca7a6e0ec0b7ebdf.js      12 kB       1  [emitted]  app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.30790115300ab27614ce176899523b62.css  432 bytes       1  [emitted]  app
static/css/app.30790115300ab27614ce176899523b62.css.map  828 bytes          [emitted]  
           static/js/vendor.7fed9fa7b7ba482410b7.js.map     553 kB       0  [emitted]  vendor
              static/js/app.f1ebca7a6e0ec0b7ebdf.js.map    23.3 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  509 bytes          [emitted]  

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

 94% asset optimization 

如果我放手,它需要...... 1155409ms !!!!

 DONE  Compiled successfully in 1155409ms                                                        13:35:34

 I  Your application is running here: http://localhost:8080

更多编辑

正如@ tony19所指出的那样,可能是嫌疑人更漂亮.按照建议,我尝试了一些Ubuntu 18.04的模式(不是Mac,因为Mac现在不在这里,对不起)我的结果是:

• vue-cli 2.9.6 + npm run dev- 挂
• vue-cli 2.9.6 + npm run build- 6秒(这太令人困惑.上面的100万秒是什么时候!？也许重新安装vue-cli欠这个变化？)
• vue-cli 3.0.0-beta16 + vue serve- 挂起(与@ tony19的报告相反)
• vue-cli 3.0.0-beta16 + vue build- 5秒

甚至更多编辑

所以,似乎这绝对是由更漂亮的造成的. https://github.com/prettier/prettier/issues/1250 是解决这个问题的原始问题,开发团队认为https://github.com/prettier/prettier/pull/2259修复了它,但现实是因为@ tony19在https://github.com/prettier/prettier/issues/4672上显示它无法处理我的情况.那好吧.

"解"

我最终做到了这一点 - 关注@ tony19的报告,改变了/node_modules/vue-loader/lib/template-compiler/index.js第78:81行

if (!isProduction) {
  code = prettier.format(code, { semi: false })
}

至

// if (!isProduction) {
//   code = prettier.format(code, { semi: false })
// }

因此问题得以解决.谢谢前端,谢谢.

Answer 1

我可以像你描述的那样重现性能问题(macOS High Sierra 10.13.4,Node 8.9.4和9.11.1).新创建的vue-cli3.x项目也会出现此问题.

挂起实际上正在发生prettier,从vue-loader模板编译器调用 .嵌套的<div>s将转换为JavaScript vue-loader,并成为以下代码段:

var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"app"}},[_c('img',{attrs:{"src":require("./assets/logo.png")}}),_vm._v(" "),_c('router-view'),_vm._v(" "),_vm._m(0)],1)}
var staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div')])])])])])])])])])])])])])])])])])])])])])])])])}]

vue-loader将这个长字符串传递给prettier,处理大约需要159秒.错误的原因是创建divs 的深层嵌套函数调用.我在prettier(问题4672)中报告了这个错误.

在此期间,我建议您重构HTML以避免深度嵌套.如果您需要坚持使用旧模板,则可以通过在生产模式下构建来解决问题,如生成构建的vue-loader跳过prettier:

NODE_ENV=production npm run dev