时间戳

首页 > 解决方案 > 使用 vue-cli 构建深度嵌套的 html 需要很长时间

vue.js - 使用 vue-cli 构建深度嵌套的 html 需要很长时间

问题描述

我发现一旦模板的 html 变得相对较深， vue-cli (2.9.6, but 3.0.0 beta* 也有同样的问题) 的构建过程需要很长时间。

例如，我刚刚添加了一些预先包含div的 s ：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>

然后建造过程需要很长时间，我相信这种深度的巢并不少见。

我应该如何处理这个问题？

编辑（详情）

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

至少可以在这些环境中重现此问题：

和 node 和 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 指出的那样，prettier 可能是嫌疑人。按照建议，我在 Ubuntu 18.04 上尝试了一些模式（不是 Mac，因为 Mac 现在不在这里，抱歉），我的结果是：

更多编辑

所以，看来这肯定是prettier造成的。 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 })
// }

这样问题就解决了。谢谢前端，谢谢。

标签： vue.jsvuejs2vue-cli

解决方案

我可以重现您所描述的性能问题（macOS High Sierra 10.13.4、Node 8.9.4 和 9.11.1）。vue-cli新创建的3.x 项目也会出现此问题。

挂起实际上发生在，从模板编译器prettier调用 。嵌套的 s 通过 转换为 JavaScript ，变成以下代码段：vue-loader<div>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（Issue 4672）中报告了这个错误。

同时，我建议重构您的 HTML 以避免深度嵌套。如果您需要坚持使用旧模板，您可以通过在生产模式下构建来解决此问题，因为生产构建的vue-loader跳过prettier：

NODE_ENV=production npm run dev

UPDATE vue-loader v15.5.0 添加了prettify允许禁用的选项prettier（更新到最新版本@vue/cli以确保您vue-loader是最新的新选项）。您可以按如下方式使用此选项：

  1. 添加vue.config.js（如果尚不存在）到项目的根目录。

  2. 编辑文件以包括：

    module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.prettify = false
          return options
        })
  }
}

推荐阅读